Sticky Menu in X (currently fixed left)

Support
#1

URL: www.littleriverbedandbreakfast.com

Hello,

I use a “fixed left” menu on my website but when in mobile mode the menu goes to the top. How can I make that mobile menu stick to the top without losing fixed left on desktop?

Thanks much,
Rob

#2

Hi Rob,

Thank you for writing in, I understand that you want to keep the fixed left menu even on mobile view, but that is how responsive design is. If you keep the fixed left menu on mobile, your content area will become narrow, especially on the portrait view mobile.

It could be possible with custom development, but regretfully this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you for understanding,

#3

I am sorry I was not more clear. I want the fixed-left menu for desktop and sticky top menu for mobile. Fixed left works great and the menu goes to the top for mobile but how do I make it stick in mobile?

#4

Hi There,

Thanks for writing in!
Sorry for the confusion!
That only can be possible if you remove the slider from top to below header.
After that, you need this CSS in theme option -> global CSS

@media (max-width: 768px){
.masthead {
position: fixed;
    top: 0px;
    z-index: 99999;
    width: 100%;
    background: #333;
}
}

Hope this helps!

Thanks

#5

How do I move the slider below the header?

#6

Hi again,

Just activate the slider below masthead via Slider Settings: Below Masthead (see screenshot)

I checked your site and it looks like you’ve already figured it out :slight_smile:

Cheers!

#7

OK, so one more thing. Almost there…we are so close!

In mobile: I have the logo centered in a sticky header with the hamburger menu to the right of it. The slider is below it. But…my logo is 225 pixels tall instead of the standard 90-95 pixels tall. So…a large portion of the slider on the welcome page is hidden by the sticky header.

How do I get the slider to load below the sticky header?

Thanks,
Rob

#8

Hey Rob,

You can add the following codel in the Theme Options > CSS:

@media (max-width: 768px) {
    .masthead + div {
       margin-top: 114px;
    }
}

Cheers!

#9

Thanks Nabeel, that looks good on the Welcome Page for the slider but doesn’t fix the rest of the pages (check out Guest Rooms as an example.)

Also, I cannot for the life of me remember where I found the Slider Above the Masthead and Slider Below the Masthead options. Can you remind me how to navigate to that too?

To summarize, what I have added to Global CSS at this point is (and assume some of it could be condensed)…

@media (max-width:979px){
header.masthead .x-brand.img {
float: none !important;
margin: 0 auto;
margin-top: 1px;
}
}
a#x-btn-navbar {
position: absolute;
top: 0;
right: 0;
}
@media (max-width: 768px){
.masthead {
position: fixed;
top: 0px;
z-index: 99999;
width: 100%;
background: #333;
}
}
@media (max-width: 768px) {
.masthead + div {
margin-top: 114px;
}
}

#10

Hi,

Please replace this

@media (max-width: 768px){
.masthead {
position: fixed;
top: 0px;
z-index: 99999;
width: 100%;
background: #333;
}
}
@media (max-width: 768px) {
.masthead + div {
margin-top: 114px;
}
}

with this

@media (max-width: 768px) {
.x-navbar.x-navbar-fixed-left {
   position: fixed;
   top: 0px;
   z-index: 99999;
   width: 100%;
   background: #333;
   bottom:auto;
}

.masthead {
    min-height: 115px;
}
}

Hope that helps

#11

Thanks Paul, that hit the spot. I think we can close this thread (I am sure I will be starting another one somewhere down he line) :slight_smile:

#12

We are glad we were able to help, you are welcome :slight_smile:

#13

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