CSS style navigation center

• 

  oliviadenne · Member · May 1, 2014 at 12:04 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am trying to create a navigation over two lines where the links are all centred. I can’t seem to do this without messing up the mobile navigation though. Here’s the link to my website : http://oliviadenne.wordpress.com/

  This is the css code so far:

  #navbar {
  background-color: #E2F1EF;
  }

  #navbar ul {
  text-align: center;
  }

  .main-navigation {
  clear: both;
  margin: 0 auto;
  max-width: 1080px;
  position: relative;
  display: inline-block;
  }

  .main-navigation li a {
  color: #000;
  text-align: center;
  }

  .main-navigation li a:hover {
  background: #89c9cd;
  color: #FFF;
  }

  .main-navigation li a:visited {
  background: #89c9cd;
  }

  Thank you!

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

• 

  thesacredpath · Member · May 1, 2014 at 7:00 pm

  • Copy link

  Hi there, replace the above with what I have below and see what you think. What I have done is to use a media query to limit some of your changes to a browser/screen width of 869px and wider. 868px is the width where the menu changes to the minified version for tablets and smaller devices.

  #navbar{
  	background-color:#E2F1EF
  }
  
  @media screen and (min-width: 869px) {
  #navbar ul{
  	text-align:center
  }
  
  .main-navigation{
  	clear:both;
  	margin:0 auto;
  	max-width:1080px;
  	position:relative;
  	display:inline-block
  }
  }
  
  .main-navigation li a{
  	color:#000;
  }
  
  .main-navigation li a:hover{
  	background:#89c9cd;
  	color:#FFF
  }
  
  .main-navigation li a:visited{
  	background:#89c9cd
  }

• 

  thesacredpath · Member · May 1, 2014 at 7:31 pm

  • Copy link

  The one other think I will mention is that the centering of the menu fails once a menu goes to multiple lines. The padding between menu items can be reduced, but that is not the perfect solution since you can’t control browser window widths.

• 

  oliviadenne · Member · May 1, 2014 at 8:01 pm

  • Copy link

  That hasn’t changed the appearance of the navigation i am afraid

• 

  thesacredpath · Member · May 1, 2014 at 8:09 pm

  • Copy link

  Go to Appearance > Mobile and disable the dedicated mobile theme. You are using a responsive width theme and don’t need the other mobile theme activated. That is for use with non-responsive designed themes.

  This is what I see when I view your site with the mobile theme disabled: https://i.cloudup.com/Y9DT9XycuF-2000×2000.png