Fixed navigation positioning, in Forefront

• 

  herbsmithinctest · Member · Nov 19, 2015 at 5:25 pm

  • Copy link
  • Add topic to favorites

  I am attempting to place a fixed position on the navigation for this website. The Forefront template originally doesn’t feature this style, but I would like it to display for the website so the user can click through the site wherever they are on any given page. When I do this it throws off the site layout a bit and will shift things around. I have been adding custom CSS to try and fix the issue, but I feel like I’m running in circles with placing content and trying to get it to fit in a working environment. I really like the layout of this template and would hate to have to switch, but I haven’t gone too far in the content for that to be a horrible thing if this just doesn’t work. Any help or ideas would be greatly appreciated.

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

• 

  thesacredpath · Member · Nov 19, 2015 at 11:28 pm

  • Copy link

  Hi there, I think what we need to do is to limit things to 930px and wider. Below that width, the touch menu comes into play and the alignment goes wonky. Add the following at the very end of your custom CSS and see what you think.

  @media screen and (min-width: 930px) {
  .site-branding {
      padding-left: 90px;
  }
  .navigation-main {
      padding-right: 90px;
  }
  #masthead.site-header {
      max-width: 1230px;
      position: fixed;
      width: 100%;
      z-index: 100;
      padding-left: 0;
      padding-right: 0;
  }
  #page {
      position: relative !important;
  }
  }

• 

  herbsmithinctest · Member · Nov 20, 2015 at 2:09 pm

  • Copy link

  That worked out perfectly, Thank You!

• 

  thesacredpath · Member · Nov 20, 2015 at 6:15 pm

  • Copy link

  You are welcome.