Parallax Pro: sticky menu

[bburro]

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!

[James]

Hi 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

[bburro]

Thank 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!

[bburro]

Okay-- 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!

[James]

yep, 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;
}

[bburro]

Gotcha!!

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.

[James]

any chance of a screenshot of the issue and one of how you want it to look?

[bburro]

screenshot

As you can see, the nav needs to be scooted up a bit... Does that help?

Thanks again!

[James]

hi bburro

screenshot did'nt seem to show in the post

[bburro]

screenshot

oops

[James]

try 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

[bburro]

When 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!

[James]

have you made any modifications to the header?

paste the code here so i can replicate the issue

[bburro]

I 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.

[James]

no problems there

paste your css in as well

[bburro]

Here 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.

[James]

in 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

[bburro]

When I apply 'top: 90px' to '.nav-primary' here is what I get in each browser:

firefox

chrome

[James]

yeh 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

[bburro]

Wow. 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!

[Author]

Posts