When I View the Website on my Smartphone and Scroll Down, can the Mobile Nav Button Stay but the Logo Move Off the Screen?

Hi, I’ve been working on a website and when I view it on a smartphone, the logo is quite big and when you scroll down, you hardly see any of the content! I set the logo to fixed position so it stays at the top of the page but only wanted it for desktops and tablets, as I want it to go off screen when scrolling down on a smartphone. However, I want the mobile nav button to stay at the top of the screen after scrolling down on a smartphone! Sorry to be a pain!

http://www.theluxsociety.co.uk/

Thanks!

Hi There,

We can reduce the size of the logo the mobile, tablet version:

@media (max-width: 767px){
    .x-brand img {
        width: 125px;
    }
    .x-navbar-wrap {
        top: 122.5px;
    }
}
@media (max-width: 480px){
    .x-brand img {
        width: 100px;
    }
}

Let us know how it goes!

Hi, thanks, but it still takes up too much room on a smartphone. Is there a way of doing it so the logo goes off the screen when you scroll down but the mobile nav button stays fixed at the top?

Thanks

Hi There,

Please replace the code provided on your other thread :

.x-logobar {
    position:  fixed;
    width: 100%;
}

.x-navbar-wrap {
    position:  fixed;
    top: 271px;
    z-index: 999999999999;
    width: 100%;
}

.x-main.full {
    margin-top: 340px;
}

With:

@media(min-width: 969px) {
.x-logobar {
    position:  fixed;
    width: 100%;
}

.x-navbar-wrap {
    position:  fixed;
    top: 271px;
    z-index: 999999999999;
    width: 100%;
}

.x-main.full {
    margin-top: 340px;
}
}

Hope it helps!

Hi, I’ve done that, but the mobile nav button doesn’t stay fixed on the screen, it moves off with the logo!

Cheers

Hi There,

It seems you have turned on the Under Construction plugin.

Please provide your admin credentials so we can take a closer look.

Thanks!

Doh! Sorry, totally forgot you’d need to actually see the site! I’ve took the maintenance page down.

Cheers!

Hi again

Please add the following code in your Customizer:

@media (max-width: 979px) {
  .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed !important;
  }
}

Let us know how this goes!

Excellent! You’ve sorted it!

Thank you so much, that’s exactly what I was after!

Glad we could help.

Cheers!

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