Making my navigation bar less generic

• 

  jeffersonpreppilots · Member · Feb 29, 2016 at 7:05 pm

  • Copy link
  • Add topic to favorites

  Right now my Navigation Menu is sort of “stale/generic”, is there any suggestions as to how I could make it more interesting? maybe add CSS? I just thought I’d see if anyone had any ideas.

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

• 

  thesacredpath · Member · Mar 1, 2016 at 6:57 am

  • Copy link

  Hi there, hmmm, you could do something like the following, which adds a top and bottom border in the same salmon color as the current page item to the main navigation bar. The second rule adds a narrow bottom border of the same color to the submenu items, and the third rule changes the color of the hover background on the submenu items.

  .navbar {
      border-top: 3px solid #ee8585;
      border-bottom: 4px solid #ee8585;
  }
  .nav-menu ul li a {
      border-bottom: 1px solid #ee8585;
  }
  .nav-menu ul li a:hover {
      background: #a59dc7;
      color: #fff;
  }

  If you have anything in mind, or if you have seen a site where you like the menu bar, post a link to it and we will see what we can do.

• 

  jeffersonpreppilots · Member · Mar 1, 2016 at 9:27 pm

  • Copy link

  I like the borders! I don’t know how many options there are but, I was also looking at trying to add some movement when you hover over the tabs. (other than just the plain old drop down) Do you have any suggestions for that?

• 

  thesacredpath · Member · Mar 2, 2016 at 8:46 pm

  • Copy link

  Movement and animations to menus can be tricky. You might try the following which increases the font size when you hover. To do this, we also have to adjust the top and bottom padding so the menu bar doesn’t jump around. I’ve used a Media Query to limit this to 644px and wider screens. Below that the touch device menu activates and this could well introduce issues with that menu.

  @media screen and (min-width: 644px) {
  .nav-menu li a:hover {
      font-size: 17px;
      padding-top: 13px;
      padding-bottom: 13px;
  }
  }

• 

  jeffersonpreppilots · Member · Mar 2, 2016 at 10:25 pm

  • Copy link

  That helps! Now how about centering the tabs in the navigation bar? Is that feasible?

• 

  thesacredpath · Member · Mar 2, 2016 at 10:47 pm

  • Copy link

  Replace the media query I had give with the following to center the menu.

  @media screen and (min-width: 644px) {
  .nav-menu li a:hover {
      font-size: 17px;
      padding-top: 13px;
      padding-bottom: 13px;
  }
  .main-navigation {
      text-align: center;
  }
  .main-navigation ul {
      padding-right: 0;
  }
  }