Navigation Bar Customization

• 

  vlogazul · Member · Sep 24, 2015 at 8:01 am

  • Copy link
  • Add topic to favorites

  Hello, is there a snippet to make the header section and navigation bar be side to side 100% on width? And would that affect the positioning of the search bar and social icons?

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

• 

  thesacredpath · Member · Sep 24, 2015 at 8:55 pm

  • Copy link

  Are you talking about making it go the full width of the browser window? If so, all the content is contained in an overall .site div and this would be difficult to achieve and have it work on all devices/screen widths. And yes, it would affect your social icons and the search bar.

• 

  vlogazul · Member · Sep 24, 2015 at 9:23 pm

  • Copy link

  Yes, the full width but only the navigation bar and header section. So it is not recommended right?

• 

  thesacredpath · Member · Sep 24, 2015 at 11:22 pm

  • Copy link

  Well, I typically would not recommend it, but give the following a try. I’ve made some additional little tweaks.

  .site-header {
      left: 0;
      max-width: 100%;
      position: fixed;
      width: 100%;
      z-index: 10;
      background-color: #011E41;
  }
  #page {
      position: initial;
  }
  .site-main {
      margin-top: 200px;
  }
  .site-header .site-branding {
      height: 150px;
      background-size: contain;
      background-position: left top;
      min-width: 1200px;
  }
  body.custom-background {
      background-size: cover;
  }

• 

  vlogazul · Member · Sep 25, 2015 at 8:28 pm

  • Copy link

  Thank you very much. Would there be a snippet to add a divider to each category link on the navigation bar but for that divider or border to be almost as the same size of the font text of the navigation bar? and for the last and second to last not to have that border? thanks

• 

  vlogazul · Member · Sep 25, 2015 at 9:15 pm

  • Copy link

  I was wondering the following. If you check the MH Magazine theme demo, on the main page below the navigation bar you will see something that says News Ticker and articles next to it move every a few seconds. Is there a snippet to add that to my Expound site?

• 

  thesacredpath · Member · Sep 26, 2015 at 7:28 pm

  • Copy link

  Hi, no that MH Magazine feature cannot be added with CSS. CSS can be used to style and position things that are already on a web page, but cannot be used to add features such as the news ticker.

• 

  vlogazul · Member · Sep 28, 2015 at 12:02 am

  • Copy link

  Ok thanks for the response, so lets say that if i want to hide the widget section only on the main page and add 2 columns below the category posts, would that be possible?

• 

  thesacredpath · Member · Sep 28, 2015 at 9:47 pm

  • Copy link

  You can use the Widget Visibility feature to hide the widgets on the main page.

  Since you have an odd number of widgets, one column will have 2 widgets in it. Since the widgets move below the content at widths under 900px, I have limited this using a media query to 901px and wider.

  @media screen and (min-width: 901px) {
  	#secondary {
  		width: 97%;
  		float: none;
  		margin-left: 4%;
  	}
  	.widget {
  		max-width: 45%;
  		display: inline-block;;
  	}
  }

• 

  vlogazul · Member · Sep 28, 2015 at 11:28 pm

  • Copy link

  Is it possible to do the same thing of having two columns just the way you did it with the widget section but this time with the two posts that are below the featured content secondary section? only for the image and tittle to appear just the same as i have them in the secondary section but in two columns left and right?

• 

  thesacredpath · Member · Sep 29, 2015 at 4:46 am

  • Copy link

  Are you talking about on the main page or on the category pages? Actually either place would be difficult to put the posts into two columns since the images themselves would take up 3/4 of the width and not really leave room for the titles.

• 

  vlogazul · Member · Sep 29, 2015 at 8:03 am

  • Copy link

  yes, i was talking about only on the main page. So even if we decrease the image size it would be difficult to accomplish?

• 

  thesacredpath · Member · Sep 29, 2015 at 7:30 pm

  • Copy link

  I’ve tried to get the two posts on the main page to show side-by-side, and things totally go awry. I don’t think this is possible with the way things are structured in Expound.