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

Support
#1

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!

#2

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!

#3

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

#4

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!

#5

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

Cheers

#6

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!

#7

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

Cheers!

#8

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!

#9

Excellent! You’ve sorted it!

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

#10

Glad we could help.

Cheers!

#11

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