Hey, you should be able to do this with CSS yeah.
Something like;
@media only screen and (min-width: 769px) {
.main-nav {
postition:absolute;
top:300px;
}
}
Just adjust the top value to suit.
Thanks
I am trying to do the same as the original poster (move the menu to below the header).
I have inserted the above code into my child style.css (correcting for the misspelling of position), however when I adjust the ‘top’ value the menu bar moves down about 1cm on the screen but no further (regardless of what px value I insert).
Any help would be greatly appreciated 🙂
The website url is: http://www.aspectpacific.com.au/WPTEST/
ed88 I did these adjustments and it looked fine remember to try these to your child theme:
.main-nav {
top: 312px;
}
.csstransforms3d.csstransitions .show-nav .main-nav {
transform: translate3d(-100%, -312px, 0px);
}
the first one is for non responsive part and the second one is for responsive add these to your child theme and see how it works out for you! 🙂
Thanks for the reply designbyjesseR. However I get no luck when adding the above code to my child theme. The menu bar doesn’t move at all. The only other thing I can think of that might be affecting it is my header. To widen my header I have added the following to my child theme.
.header {
height: 150px;
}
Would this be affecting it?
Thanks this worked great for me!
note: I had to add a selector, .admin-bar, because that’s the way it is called in the parent theme… or use !important.
@media only screen and (min-width: 769px) {
.admin-bar .main-nav {
postition:absolute;
top:300px;
}/*Move the main nav menu below the header. Non-responsive only */
}
Is anybody still having an issue with this? I used the code AJD supplied, with an adjustment to top:500px;
The location of the menu is perfect upon initial fixed sight. However, it hovers as I scroll down the page, in the middle of the page, blocking all text/pictures/etc.
How do I keep the menu fixed – starting below the header (which I have completed) – and then fixed at the top of the page as the reader scrolls to the bottom? Any help is appreciated
@jonbquist: If you require assistance then, as per the Forum Welcome, please post your own topic.
This topic references an old version of WordPress.
I typo-ed ‘position’ in my code snippet. That would probably be the issue, it needs to be: position:absolute
Your menu is still: position:fixed, but 500px down from the top of the screen.
