customize navigation bar with css

• 

  f0klogin · Member · Jan 10, 2015 at 9:35 am

  • Copy link
  • Add topic to favorites

  Hello;
  I’m hoping to hear from you genius folks about some custom coding of my navigation bar.
  first off, here’s the site – http://sstw.net/~aaron/
  everything is placeholders for the moment. I’ve been able to change some aspects of the code (see below) but cannot get the upper nav-bar and header image to be full width or change the color of text (do I have to somehow override the body ‘color’ tag? If possible I’d also love a tip on removing the vert. lines btwn links.
  Thanks in advance

  here’s the custom code-
  #header {
  margin: 0 auto;
  max-width: 1145px; /*or 100% */
  font-size: 20px;
  background-color: white;
  padding: 0;
  }

  .skip-container {
  padding: 0;
  }

  #menu-main-menu {
  max-width: 1145px;
  background-color: #336699;
  margin: 0;
  padding: 10px;
  color: #ffff66;
  font-family: verdana;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5em;
  vertical-align: middle;
  }

• 

  loopafox · Member · Jan 10, 2015 at 12:59 pm

  • Copy link

  Hi,

  Can you try deleting the indicated lines and adding the indicated CSS rules to your stylesheet.

  #menu-main-menu {
  width: 100%; – add this line
  max-width: 1147px; – Delete this line
  text-align: center; – add this line
  padding: 10px; – Delete this line
  padding-top: 10px; – add this line
  padding-bottom: 10px; – add this line
  }

  .top-menu {
  float: right; – Delete this line
  }

  #logo {
  float: delete this line
  margin: 0;
  }

• 

  loopafox · Member · Jan 10, 2015 at 1:02 pm

  • Copy link

  also, to get rid of the vertical lines between each link try deleting the indicated line:

  .top-menu li a {
  border-left: 1px solid #ccc; – delete this line
  }

• 

  staff-happychia · Staff · Jan 10, 2015 at 6:41 pm

  • Copy link

  This question is appropriate for Themes and Templates area of the WordPress.org forums :-)

  This forum is exclusively for WordPress.com users so we cannot help you here.

  In case you are unaware, please check the difference between WordPress.com and WordPress.org.

• 

  f0klogin · Member · Jan 11, 2015 at 3:48 am

  • Copy link

  ah sorry.
  I’ve been confused by this a bit

• 

  f0klogin · Member · Jan 11, 2015 at 3:52 am

  • Copy link

  feel free to delete this

• 

  loopafox · Member · Jan 11, 2015 at 4:04 am

  • Copy link

  What I wrote will still work or a WordPress.org site.

  No need to delete it.

  Sorry I didn’t notice u were on self install.