Help with navbar, menu item borders, hover size etc.

• 

  coraxoband · Member · Jan 6, 2015 at 10:13 am

  • Copy link
  • Add topic to favorites

  I’m trying to get the navbar menu items to “zoom” in while hovering. I pretty much have it like I want now except the whole navbar changes size when you hover over them. Any way to make the navbar a static size with just the text changing size while hovering?

  Also any idea how to get rid of the grey borders between the menu items on the navbar, and make the menus evenly spaced? I had them evenly spaced previously but the code I used for that stopped working for some reason.

  Here’s the CSS I have now:

  #access ul {
  	font-size: 22px;
  }
  
  #access {
  	float: none;
  	text-align: center;
  }
  
  #access li {
  	display: inline-block;
  	float: none;
  }
  
  #access li a:hover {
  	color: #fff;
  	background-color: #048;
  	font-size: 24px;
  }
  
  .entry-content {
  	font-size: 20px;
  }
  
  img.nohover {
  	border: 0;
  }
  
  img.hover {
  	border: 0;
  	display: none;
  }
  
  a:hover img.hover {
  	display: inline;
  }
  
  a:hover img.nohover {
  	display: none;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  coraxoband · Member · Jan 6, 2015 at 10:37 am

  • Copy link

  I added this bit, now at least it won’t jerk around the whole content of the page while hovering between items:

  #access li {
    margin-top: 10px;
    padding-left: 5px;
    padding-right: 15px;
    line-height: 10px; }

• 

  coraxoband · Member · Jan 6, 2015 at 10:59 am

  • Copy link

  Forgot to mention the theme is Piano Black.

  Also got rid of the bordres with adding the border bit to this:

  #access li {
  	display: inline-table;
  	float: none;
  	border: 0px
  	}

• 

  coraxoband · Member · Jan 6, 2015 at 12:06 pm

  • Copy link

  So now going with this, not as jerky with the transition added. Still would prefer if the other items would be stationary during the animation.

  #access ul {
  	font-size: 23px;
  }
  
  #access {
  	float: none;
  	text-align: center;
  
  }
  
  #access li {
  	display: inline-table;
  	float: none;
  	border: 0;
  }
  
  #access li {
  	margin-top: 2px;
  	padding-left: 10px;
  	padding-right: 10px;
  	line-height: 10px;
  }
  
  #access li a:hover {
  	color: #fff;
  	transition:All .5s ease;
  	font-size: 25px;
  }
  
  .entry-content {
  	font-size: 20px;
  }
  
  img.nohover {
  	border: 0;
  }
  
  img.hover {
  	border: 0;
  	display: none;
  }
  
  a:hover img.hover {
  	display: inline;
  }
  
  a:hover img.nohover {
  	display: none;
  }

• 

  coraxoband · Member · Jan 6, 2015 at 1:01 pm

  • Copy link

  Found a working code! Here it is:

  #access ul {
  	font-size: 23px; 
  
  }
  
  #access {
  	float: none;
  	text-align: center;
  
  }
  
  #access li {
  	display: inline-table;
  	float: none;
  	border: 0;
  }
  
  #access li {
  	margin-top: 2px;
  	padding-left: 10px;
  	padding-right: 10px;
  	line-height: 10px;
  }
  
  #access li a:hover {
  	color: #fff;
  	-webkit-transform: scale(1.1,1.1);
  	-webkit-transition-timing-function: ease-out;
  	-webkit-transition-duration: 0.3s;
  	-moz-transform: scale(1.07,1.07);
  	-moz-transition-timing-function: ease-out;
  	-moz-transition-duration: 0.3s;
  
  }
  
  .entry-content {
  	font-size: 20px;
  }
  
  img.nohover {
  	border: 0;
  }
  
  img.hover {
  	border: 0;
  	display: none;
  }
  
  a:hover img.hover {
  	display: inline;
  }
  
  a:hover img.nohover {
  	display: none;
  }

• 

  thesacredpath · Member · Jan 6, 2015 at 11:33 pm

  • Copy link

  Wow, nice job!