Community Forums › Forums › Archived Forums › Design Tips and Tricks › Remove Floating Navigation Bar – Magazine pro
- This topic has 11 replies, 3 voices, and was last updated 9 years, 7 months ago by relaxedguy.
-
AuthorPosts
-
April 14, 2014 at 6:42 am #100166ReginaldMember
Hi guys,
I was wondering...is there a way to remove the floating navigation bar (top of the screen) on Magazine pro? Been searching around Google but can't find a solution for that.
Website is still new, here goes: http://www.OutRank.guru
Thanks!
Website | Facebook | Twitter | Google+ | Editorial Sumo
April 14, 2014 at 7:10 am #100170AnitaKeymasterIt's currently "fixed" - change it to absolute and it will move the entire screen when you scroll.
.nav-primary { background-color: #222222; left: 0; position: fixed; top: 0; width: 100%; z-index: 999; }
Love coffee, chocolate and my Bella!
September 4, 2014 at 8:25 am #122749relaxedguyMemberI changed position: fixed to position: absolute on line 1325 or thereabouts as below and nothing happened.
What about line 1954:
.nav-primary { position: relative; }
What gets edited where to make the navigation stay put?
Thanks.
September 4, 2014 at 8:36 am #122756AnitaKeymasterYou would change relative to fixed, however.. you may need to add some margins or padding to drop the content area down.
Love coffee, chocolate and my Bella!
September 4, 2014 at 8:49 am #122759relaxedguyMemberThe navigation bar remains visible as I scroll down. This is terrible UI and a bad idea overall and I want the navigation to remain at the top of the page.
I made these changes as recommended, still doesn't work. Sorry if I am responding to a question that doesn't solve my problem, it's the closest I've come to finding an answer so far.
.nav-primary { background-color: #222; color: #fff; left: 0; position: absolute; top: 0; width: 100%; z-index: 999; } .nav-primary { position: fixed; }
September 4, 2014 at 9:19 am #122768AnitaKeymasterPlease provide a link to your site. It's hard to assist you without it. Or you can read this -http://wpsites.net/web-design/how-to-make-your-nav-menu-sticky/.
Love coffee, chocolate and my Bella!
September 4, 2014 at 9:46 am #122772relaxedguyMemberThat link didn't solve the problem. This really should be a toggle option in the theme settings.
Site is http://onlinedatingpost.com.
I'll leave it alone for a bit and you can take a look.
September 4, 2014 at 10:04 am #122777AnitaKeymasterThe functionality of the themes is controlled by the child theme developers not the framework. I highly doubt if they will add a toggle on them. Studiopress has a tutorial here - http://my.studiopress.com/tutorials/sticky-menu/.
Love coffee, chocolate and my Bella!
September 4, 2014 at 10:17 am #122780relaxedguyMemberAnita, thank you but you are misreading my request. I don't want a sticky menu. It's a terrible idea and I want to get rid of it asap. I want the navigation menu to remain at the top of the page, just like every other site out there. If you have a link to do this that explains it for this theme and every edit required, great. Otherwise I'll have to look elsewhere. Appreciate your attempt at helping though.
September 4, 2014 at 10:49 am #122784AnitaKeymasterYou wrote above:
What gets edited where to make the navigation stay put?
I interpreted that as you wanted it "sticky" to stick in place... stay there as you scroll.
Look for this code:
.nav-primary { background-color: #222222; position: fixed; width: 100%; z-index: 999; }
Delete the position line or change it.
Love coffee, chocolate and my Bella!
September 4, 2014 at 11:45 am #122795relaxedguyMemberAnita, it appears that your solution works in Safari on Mac but not Chrome for Mac. I've emailed Studiopress support about this, as they sent me a similar edit as yours. When we figure this out I'll post the answer here.
September 4, 2014 at 12:05 pm #122800relaxedguyMemberClear you cache all the time 🙁
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.