How to make both the logo and the nav bar fixed ("sticky") in the header on both mobile and desktop

jeremy4 · April 1, 2018, 6:19am

Hi RueNel, yes the screenshot you sent of the site as it appears on mobile devices looks perfect and that’s how I’d like it to appear after putting in the code. Unfortunately though, the nav bar disappears entirely and the font changes throughout the site (only on mobile).

rad · April 1, 2018, 12:01pm

Hi there,

Please update your script to this

(function($){
  $('.x-logobar').prependTo( $('.x-navbar') );
  $('.x-topbar').prependTo( $('.x-navbar') );
})(jQuery);

Thanks!

jeremy4 · April 1, 2018, 1:47pm

Thanks Rad! It appears to work on desktop now but not on mobile. Any ideas?

rad · April 1, 2018, 5:16pm

Hi there,

I don’t see the code being implemented, and it works on mobile. If you’re referring to mobile fixed positioning, it’s intentionally disabled for mobile. But you can enable it by adding this CSS to your global custom CSS.

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed !important;
}

Thanks!

jeremy4 · April 2, 2018, 9:30pm

Hi Rad, thank you! That’s quite close. Is there a way to increase the opacity of the logo/nav bar? Also it seems the content loads below the nav bar at the inception of each page load, and then suddenly “jumps” into position when scrolling begins. Is there a way to fix this?

paul.r · April 3, 2018, 2:16am

Hi,

To increase opacity, find the code that reads.

.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top {
    background-color: rgba(205,193,165,0.4);
}

In that code, change 0.4 to a higher number.

To fix the page load issue, you can add this in Theme Options > CSS

@media(min-width:979px) {
   .masthead {
       min-height:96px;
   }
}

@media(max-width:979px) {
   .masthead {
        min-height:125px;
    }
}

Hope this helps

lely · April 3, 2018, 2:17am

Hi Jeremy,

To increase opacity, try adding the following CSS:

.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top {
    background-color: rgba(205,193,165,0.4) !important; /*Adjust .4 to your preferred opacity value or change the entire rgba value*/
}

Regarding jump on scroll, I can’t seem to duplicate the issue.

jeremy4 · April 3, 2018, 1:48pm

Thank you @paul.r and @Lely! These changes are a step in the right direction, however, upon zooming in and out of the browser the white masthead is revealed. Also, there is a 3rd breakpoint at which, upon decreasing screen width, the Site Title changes from 2 lines of text to 3, creating another overlap (most mobile devices are displaying the Site Title as 3 lines of text). a) How would one change the color of only the masthead, and b) How would one account for the 3rd breakpoint in this case?

lely · April 4, 2018, 12:24am

Hi Jeremy,

For site title 3 lines of text on smaller screen size, we can use media queries like below:

@media (max-width:480px){
.x-brand {
    font-size: 19px; /*Adjust this value to smaller font size. Smaller font size will decrease ROW of text. 480px can be adjusted too.*/
}
}

For more specific guidance, see this:

Not sure what white masthead you are seeing. From checking, I can only see white strip at the bottom of navbar. To remove it, try this CSS:

.x-navbar {
    border-bottom: 0;
}

Hope this helps.

jeremy4 · April 4, 2018, 4:13am

Thanks @Lely I simply changed the min-height and that seems to be working. Insofar as the white block that appears below the navbar, you can see it appear when adjusting the width of your browser. At the breakpoint at which the navbar becomes the “sandwich” the space behind it is simultaneously revealed and extends below it. If it were the same color as the nav bar it wouldn’t matter but it’s white. How would one change that?

paul.r · April 4, 2018, 5:49am

Hi,

Please change this

@media(max-width:979px) {
   .masthead {
        min-height:125px;
    }
}

to

@media(max-width:979px) {
   .masthead {
        min-height:101px;
    }
}

Hope this helps.

jeremy4 · April 7, 2018, 10:32pm

Thank you @Lely and @paul.r
I accounted for site title changing from 2 to 3 lines on mobile without decreasing font size by including

@media (max-width:480px){
.masthead {
min-height:155px;

The extra white space doesn’t appear unless one is zooming in or dragging window inwards to the point where desktop menu changes to mobile (the “sandwhich” style menu). How would one prevent the mobile sandwich menu from ever appearing on desktop?

christopher · April 8, 2018, 9:14am

That is not possible. The hamburger menu is triggered by the width of the browser and it does not depend on the actual device.

The white space you see is because of this part of the code:

@media (max-width: 979px)
.masthead {
    min-height: 129px;
}

Please change the value of 129px to find the best value. I think 100px can be a good value.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

jeremy4 · April 8, 2018, 1:25pm

Ok thank you @christopher.amirian
I only asked in the same thread because it appeared as though the white space happens at the breakpoint at which desktop menu changes to sandwich. The 129px seems to work insofar as not showing the white space as long as one doesn’t adjusting the width of the browser nor zoom in until sandwich appears. Many thanks for your help!

nabeel · April 8, 2018, 2:54pm

Hi again,

Can you please try replacing your JS code present in your Global JS section with the following code:

function header_adjustment() {
	jQuery('header.masthead').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar-inner').height() + jQuery('.x-logobar').height());
}
jQuery(document).ready(function(){
	jQuery('.x-logobar').prependTo( jQuery('.x-navbar') );
	jQuery('.x-topbar').prependTo( jQuery('.x-navbar') );
	header_adjustment();
});
jQuery(window).resize(function(){
	header_adjustment();
});

Then please remove the following CSS as well:

@media (max-width: 979px)
.masthead {
    min-height: 129px;
}
}

Don’t forget to clear your browser’s cache after making the code changes. Let us know how this goes!

jeremy4 · April 11, 2018, 2:12am

@Nabeel thank you, but now on mobile devices I’m getting the white space . It disappears as soon as scrolling happens, but every time any of the pages load it appears again.

paul.r · April 11, 2018, 8:59am

Hi,

I checked in mobile and it seems to be working fine on my end.

Please clear your mobile browser cache and check again.

Thanks

jeremy4 · April 11, 2018, 1:36pm

@paul.r The white space appears as each of the pages are loading, but snaps away as soon as scrolling commences. I also went ahead and deleted from the Global CSS:

@media(min-width:979px) {
.masthead {
min-height:98px;
}
}

@media (max-width:480px){
.masthead {
min-height:155px; /Adjust this value to larger min-height. Large min-height will increase size of masthead underneath header/navbar. 480px can be adjusted too./
}
}

Should I have done that? What should my Global CSS look like?

Alaa · April 11, 2018, 5:03pm

Hi,

This is how exactly your website loads on mobile devices:

I couldn’t notice the white space you referenced in your latest reply. As it’s really getting hard to continue discussing this situation here on that thread, kindly please open a new thread for further inquiries.

Thanks.

system · April 21, 2018, 5:03pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.