Need Fixed Main Nav When Scrolling

zoeandtodd · Member · Sep 24, 2015 at 1:41 pm
Copy link

Add topic to favorites
Hello!

I recently switched to the Lovecraft theme for my upcoming site launch on zoeandtodd.com. I am familiar with WordPress, but I just recently upgraded to Premium and am new to the CSS stuff.

I need to fixed the main nav bar to the top of the page when scrolling and so that it shows up that way on every page (not just the home page). I have read many forums and tried to change the CSS by adding position: fixed. Maybe I’m doing something wrong?

Here is the CSS I thought was relevant:

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

Here is what I tried to add to it:

position: fixed;
top: 0;
width: 960px;

I’m guessing I’m just doing this totally wrong, but after reading countless forums on this, I’m more lost than I was at the beginning. Any help would be so grat!

The blog I need help with is: (visible only to logged in users)
jameswelbes · Member · Sep 24, 2015 at 9:20 pm
Copy link
Hey there,

Am I correct in assuming that you’ve figured it out already? It appears that your nav menu is indeed fixed to the top of your screen.
thesacredpath · Member · Sep 24, 2015 at 9:59 pm
Copy link
Hi, on Gateway this is challenging, especially with your logo since the menu can cover up the top edge of your logo. Also, we have to account for when visitors are logged and adjust the location of the menu so it isn’t hidden behind the top admin bar. The header image size also changes as the window/screen gets narrower, so we also have to use Media Queries to adjust things. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and then save and visit your site and click around and narrow and widen your browser window. Do this while logged in and also when logged out to make sure there aren’t any issues. Also check on a phone and tablet if you can. It looks to me like everything is working with the following, but please double check.
```
.site-header {
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
	background-color: #fff;
}
.header-bg {
  top: 60px;
}
.logged-in .site-header {
	padding-top: 32px;
}
@media screen and (max-width: 1050px) {
	.header-bg {
		top: 120px;
	}
}
@media screen and (max-width: 815px) {
	.header-bg {
		top: 180px;
	}
}
```
zoeandtodd · Member · Sep 25, 2015 at 2:34 am
Copy link
Thank you so much! I actually ended up switching to Gateway from Lovecraft because it has the built-in sticky menu. I did try the CSS customization you sent me, but it did make the header image cover up the post title and social media icons. I think for now it is okay with Gateway, thanks so much for helping!
jameswelbes · Member · Sep 25, 2015 at 2:40 am
Copy link
oh, you switched themes, that must be why the nav menu was already fixed when I looked at it =]

I was thinking “what are they talking about? The nav bar is already fixed at the top” haha

No items found.