Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro: sticky menu
- This topic has 20 replies, 2 voices, and was last updated 8 years, 11 months ago by James.
-
AuthorPosts
-
May 19, 2015 at 2:58 pm #152822bburroMember
Greetings! I am attempting to fix the secondary menu so that it sticks to the bottom of the header when the user scrolls down. How can I achieve this?
I am creating the site on localhost.
Thanks!
May 20, 2015 at 6:06 am #152886JamesParticipantHi bburro
check out this post I just replied to, it should help you out
http://www.studiopress.community/topic/sticky-secondary-nav-menu-in-parallax-pro/#post-152879
May 20, 2015 at 2:20 pm #152957bburroMemberThank you so much for your help-- the social icons are working great in the header (from other post).
I misspoke on this one-- I am using the primary nav and trying to make it sticky. I tried modifying .nav-primary and it works but renders incorrectly. What am I missing?
Thanks again!
May 20, 2015 at 3:30 pm #152967bburroMemberOkay-- I almost got it... not sure if this is the best way- please let me know!
.nav-primary {
background-color: black;
left: 0;
margin-bottom: 60px;
position: fixed;
text-align: center;
top: 70px;
width: 100%;
z-index: 999;
}The only problem is that the menu is the full width of the screen, rather than sitting inside of .site-inner... Why is that?
edit//
My solution isn't working right in all browsers. It looks like the top attribute renders differently in Firefox and Chrome.
Thanks!
May 20, 2015 at 3:48 pm #152972JamesParticipantyep, that's the idea
with position fixed and width 100% it is going to go full width, and with 'left: 0' will stick it to the left of the screen
instead leave out the 'left: 0' and add a 'max-width'
like so
.nav-primary { background-color: black; margin-bottom: 60px; max-width: 1140px; position: fixed; text-align: center; top: 70px; width: 100%; z-index: 999; }
May 20, 2015 at 4:50 pm #152983bburroMemberGotcha!!
My final issue is how to position the nav right at the bottom of the header. The top attribute isn't working cross-browser, and I am using firebug to try to find the rule that defines the space between the bottom of header and top of nav. I can't find it.
The content scrolls behind the nav and into the mystery space and then disappears behind the header.
Ugh!! Thanks again.
May 20, 2015 at 5:04 pm #152985JamesParticipantany chance of a screenshot of the issue and one of how you want it to look?
May 20, 2015 at 5:18 pm #152991bburroMemberMay 20, 2015 at 5:20 pm #152992JamesParticipanthi bburro
screenshot did'nt seem to show in the post
May 20, 2015 at 5:22 pm #152994bburroMemberoops
May 20, 2015 at 5:31 pm #152998JamesParticipanttry adjusting the 'top: 70' try '0' or -'40' or removing it completely
check you don't have a margin on the bottom of the header causing the gap
May 20, 2015 at 6:25 pm #153002bburroMemberWhen I change the top attribute it renders differently in Firefox than it does in Chrome. One needs a top of 70, the other 100. There is no margin pushing it down. I'm really confused!
May 20, 2015 at 6:36 pm #153006JamesParticipanthave you made any modifications to the header?
paste the code here so i can replicate the issue
May 20, 2015 at 6:58 pm #153012bburroMemberI removed all of my custom css and the issue still exists.
Here is the header code:
<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner"> <div class="wrap"> <div class="title-area"> <p class="site-title" itemprop="headline"> <a href="http://localhost/waco/">Computer Solution</a> </p> <p class="site-description" itemprop="description">for all your IT needs...</p> </div> <aside class="widget-area header-widget-area"> <section id="text-5" class="widget widget_text"> <div class="widget-wrap"> <h4 class="widget-title widgettitle">(254) 633.2400</h4> <div class="textwidget"></div> </div> </section> <section id="simple-social-icons-3" class="widget simple-social-icons"> <div class="widget-wrap"> <ul class="alignright"> <li class="social-email"> <li class="social-facebook"> <li class="social-gplus"> <li class="social-twitter"> </ul> </div> </section> </aside> </div> </header>
Please let me know if this isn't what you meant.
Thanks again.
May 20, 2015 at 7:07 pm #153014JamesParticipantno problems there
paste your css in as well
May 20, 2015 at 7:21 pm #153015bburroMemberHere is the them header code:
.site-header { background-color: #000; left: 0; position: fixed; top: 0; width: 100%; z-index: 999; }
Here is my custom CSS:
/* decrease content padding on devices 1024px and wider */ @media screen and ( min-width: 1024px ) { .full-width-content .content { padding: 0 100px 25px } } /* site-inner */ @media screen and ( min-width: 980px ) { .site-inner {margin-top: 100px} } @media screen and ( max-width: 979px ) { .site-inner {margin-top: 10px} } /* hide tab images 374px and smaller */ @media screen and ( max-width: 374px ) { #slidetabs_670 img {display: none} } /* site header */ .site-header {background-color: #fff} /* site header info */ #text-5 h4 {color: #000; font-size: 27px; margin: 0} #text-5 .textwidget {margin: 0} /* main nav */ .genesis-nav-menu {line-height: 0} /* sticky */ .nav-primary {width: 100%; position: fixed; max-width: 1140px; z-index: 999} /* main content top-padding */ .full-width-content .content {padding-top: 10px} /* Menu Links link --> visited --> hover --> active */ /* a */ .parallax-pro-blue a {color: #1321D7} /* current item and hover */ .parallax-pro-blue .entry-title a:hover, .parallax-pro-blue .genesis-nav-menu a:hover, .parallax-pro-blue .genesis-nav-menu .current-menu-item > a, .parallax-pro-blue .genesis-nav-menu .sub-menu a:hover, .parallax-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a:hover, .parallax-pro-blue .home-odd .featured-content .entry-title a:hover, .parallax-pro-blue .site-footer a:hover, .parallax-pro-blue .site-header .widget-area a:hover {color: #FFCC40} /* hide headings */ .hide {font-size: 1px; color: #ffffff;} h1.entry-title {font-size: 1px; color: #FFFFFF; margin: 0} .entry-header::after {display: none} /* tabs */ .spaced-horizontal .st_views .st_view_active .st_view_inner {padding-top: 20px} #slidetabs_670 .st_views {font-size: 18px; line-height: 20px; border:5px solid #0785CF} #slidetabs_670 .st_tabs ul li a {font-size: 14px; font-weight: bold; background: none repeat scroll 0 0 #6ABDEF; color: #000; border-top-color: #6ABDEF} #slidetabs_670 .st_tabs ul li a:hover {background: none repeat scroll 0 0 #1F97DE; color: #FFF; border-top-color: #1F97DE} #slidetabs_670 .st_tabs ul li a.st_tab_active {background: none repeat scroll 0 0 #0785CF; color: #FFF; border-top-color: #0785cf} .st_view_inner h1 {color: #0785CF; font-size: 30px; letter-spacing: -2px; border-bottom: 1px dotted #0785CF;} .slidetabs p {margin-bottom: 15px} .slidetabs ul {margin-bottom: 20px} /* columns */ p.line {border-bottom: 1px solid #0785CF; padding-top: 20px} div.one-half {text-align: center} div.one-half .button-column {border-radius: 10px; padding: 15px; background: yellow; color: #000; border: 1px solid orange;} /* pricing tables */ .content-box-green {padding: 20px 0 0} table {line-height: inherit; margin-bottom: 0} th {border-bottom: 1px solid grey} td, th {text-align: center} /* contact form */ input, select, textarea {padding: 0;}
Please let me know if you need anything else.
May 20, 2015 at 7:38 pm #153018JamesParticipantin the css above there is no 'top: 70px' for the '.nav-primary'
i found this reproduced the issue exactly
but adding a 'top' in solved the problem in firefox and chrome...but the about needs to be the actually height of your header, ie: your header is higher than 70px
so it could be 'top: 90px' adjust the amount until is sits perfectly under the header
May 20, 2015 at 7:55 pm #153020bburroMemberMay 20, 2015 at 8:40 pm #153026JamesParticipantyeh i see your just not getting it the same in both browsers
that is odd, because on chrome here it works exactly the same as firefox, right to the pixel
you might need to go back to default styles and then go from there, remove the widgets in the header as well, remove the logo, then add back in/testing one by one till the issue pops back up.
another option would be to move the menu inside the header, then you would not need to position either one
and then wrap both the header and nav in a container div and position the whole thing
May 21, 2015 at 3:59 am #153071bburroMemberWow. I figured out that the discrepancy was due to the admin bar at the top when you're logged into wordpress. I learned on Joomla so I'm not familiar with all the intricacies yet...
Thanks!
-
AuthorPosts
- The topic ‘Parallax Pro: sticky menu’ is closed to new replies.