Fixed Header and Navbar

pabloconradphotography · Member · Apr 20, 2015 at 4:37 pm
Copy link

Add topic to favorites
Hi,

I’m wanting to make my header and menu (navbar) be fixed while the content can scroll underneath.

I use the McKinley theme.

Is this possible with CSS?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 21, 2015 at 3:19 pm
Copy link
With McKinley, this is difficult. There isn’t an overall header div that in which we can set a background so that the content can slide beneath it. Secondly, with you setting, and moving the menu items with position: absolute, it overrides the position: fixed setting for the navigation and scrolls them out of sight. You can see what I mean by adding this to the bottom of your CSS and then scrolling down.
```
.navbar {
    position: fixed;
    z-index: 10;
}
#main {
    background: none repeat scroll 0 0 transparent;
    padding-top: 50px;
}
```
The other thing I’ll mention is that for tablets/screens narrower than about 950px, your header info at right starts to disappear off the right side of the screen, and by the time you get down to 768px (iPad portrait) it is nearly entirely gone.

Here is one suggestion. add a 1000px x 150px empty white header image to your site. Add the logo to the site-title div, size it as needed (I would suggest not over 320px wide), text indent the text-based site title at -9999px and then float it to the left. I think then we could figure out a way to make the header area fixed with the content scrolling underneath it.

No items found.