nav bar in big brother theme

• 

  eleospsychologycenter · Member · May 2, 2016 at 1:12 am

  • Copy link
  • Add topic to favorites

  How do I add a contrasting underline in the nav bar?
  How do I adjust the menu item container height, or add lines between menu items?

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

• 

  thesacredpath · Member · May 2, 2016 at 10:59 pm

  • Copy link

  Hi there,

  If you are talking about to the overall navigation section, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .main-navigation.has-header {
      border-bottom: 4px solid #cc0000;
  }

  If you are wanting to add an underline to the text in the navigation, you can use this.

  .main-navigation a, .main-navigation a:visited {
      border-bottom: 4px solid #ffee00!important;
  }

  The height of the navigation bar is determined by top and bottom padding on the linked text element with it. You can add this and adjust the values as you desire.

  .main-navigation ul li a {
      psdding-top: 9px;
      padding-bottom: 9px;
  }

  To place lines between the navigation menu items, add the following and you can adjust the width and color as desired.

  .nav-horizontal > div > ul > li {
      border-right: 4px solid #cc0000;
  }
  .nav-horizontal > div > ul > li:last-of-type {
      border-right: none;
  }

• 

  eleospsychologycenter · Member · May 3, 2016 at 3:19 am

  • Copy link

  That’s certainly interesting. However, I was looking more for something similar to the Antenna theme. How can I make Big brother do that?

• 

  thesacredpath · Member · May 3, 2016 at 4:44 am

  • Copy link

  I’ve taken the Antenna code and changed selectors and mimicked it on you site with the following.

  .main-navigation.has-header a, .main-navigation.has-header a:visited {
      border-left: 1px solid #1c1c1c;
      border-right: 1px solid #3c3c3c;
      color: #fff;
      font-size: 14px;
      padding: 1.2em 1em;
      text-transform: uppercase;
  }
  
  .main-navigation.has-header {
  	border-bottom: 4px solid #00b4dc;
  	background: #292929;
  }
  
  .main-navigation.has-header a:hover, .main-navigation.has-header a:focus, .main-navigation.has-header a:active {
  	background-color: #181818;
  	color: #fff;
  }