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

Support
#1

Hello,
I was wondering how to make both the logo and the nav bar fixed to the top when the layout is stacked. When the layout is inline, both the logo and nav bar stay fixed, but the logo then defaults to the left while the nav bar defaults to the right. Moreover, neither remain fixed on mobile. How does one get both stacked centrally on top of each other and fixed on both desktop and mobile?
Thanks!
Jeremy

#2

Hi @jeremy4,

Thanks for writing in.

Would you mind sharing us your URL so we could fully understand the situation and we could give you the best code to make it.

You might want to check the link below on how to fix the header.

Hope it helps.

Thanks.

#3

Hi Nico, thank you. It’s http://t2h.1d1.myftpupload.com/

#4

Hi again,

Please try adding the following CSS code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
  header.masthead.masthead-stacked {
    position: fixed;
    width: 100%;
    z-index: 999;
  }
}

Let us know how this goes!

#5

Thanks Nabeel, unfortunately that didn’t work though. Both mobile and desktop remain unaffected.

#6

Hey There,

Thanks for updating in! We apologized if the code did not work out for you.

To resolve this, please do the following:

(function($){
  $('.x-logobar').insertBefore( $('.x-navbar-inner') );
})(jQuery);
  • And then go to X > Theme Options > Header > Navbar and set the “Navbar Top Height” to 62px instead of 22.

We would loved to know if this has work for you. Thank you.

#7

Thanks RueNel. It seems to work on desktop, but breaks the mobile site by removing the nav bar entirely and changing the fonts everywhere Slider Revolution is used. Any ideas?

#8

Hey There,

In smaller screens, it may look like this?

Could you please provide us a screenshot of how you would want to display the header in smaller screens? Maybe you can send us a mock layout or a clarifications for your header appearance in smaller screens?

Thank you in advance.

#9

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

#10

Hi there,

Please update your script to this

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

Thanks!

#11

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

#12

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!

#13

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?

#14

Hi,

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

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

#15

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.

#16

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?

#17

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.

1 Like
#18

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?

#19

Hi,

Please change this

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

to

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

Hope this helps.

1 Like
#20

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?