I'm using a fixed top navbar and when viewed on a mobile device, can the navbar button float to the right and the logo to the left?

[core365]

Hi, I’m using a fixed top navbar and when viewed on a mobile device, can the navbar button float to the right and the logo to the left? When I view it using the 481px-767px in Cornerstone, because I’m using a fixed top navbar the logo is above the navbar but is it possible for this to change when viewed at certain sizes on a mobile device? I’ve done a rough mockup to demonstrate this.

Also, is it possible to do it so when you scroll down the page on a smartphone, the topbar, logo and navbar scroll off the top of the page instead of being fixed?

I’ll put the URL in a secure note as it’s being built on a temporary link.

Thanks!

[thai]

Hi @core365,

Please change the layout of LOGO AND NAVIGATION to Inline:

After that add this custom CSS under Theme Options > CSS:

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

Hope it helps

[core365]

Hi, I’ve changed it to Inline and I’ve added in the CSS, but it’s created other issues! When you view on a laptop or desktop, the navbar isn’t centred and the logo is over to the left of the screen and when you scroll down the page, the logo and navbar jumps further down the page and stays there!

The mobile view needs tweaking, but the logo is now to the left and the navbar button to the right, however when you scroll down the page, the logo and navbar jumps further down the page and stays there and the topbar is still showing too.

Thanks!

[christian]

Hey @core365,

That happened because of your other customizations. The header behavior in your site is different than what’s included out of the box. Please remove this code:

.x-navbar-fixed-top {
    top: 163px;
}

Regarding the centering of Inline Header Layout in desktop, add this code in Theme Options > CSS.

@media (min-width:980px) {
    .x-brand,
    .masthead-inline .desktop .x-nav {
        display: table;
        float: none;
        margin-left:auto;
        margin-right:auto;
    }
}

When implemented correctly, it should work.

As you might already know, we do not provide custom CSS as part of our product support. The CSS we’ve shown here only serve as a guide. We will not fix issues resulting from the use of custom CSS or any customization.

Please consider switching to Pro as this could be achieved without using custom CSS.

Hope that helps and thank you for understanding.

[core365]

Hi, thanks for that, it’s sorted most of the issues, there’s just one left now! When you view it on a smartphone and scroll down the page, the topbar stays fixed where it is, but I’d like it to go off the page (same as the logo and navbar) if that’s possible.

Thanks!

[friech]

Hi @core365,

Do you mean you want the topbar to remain at the top on mobile? If so, please add this to custom CSS.

@media (max-width: 979px) {
	header.masthead .x-topbar {
		position: relative;
	}
}

What this does is restore back the topbar to its original relative position.

Hope it helps,
Cheers!

[core365]

Hi, that’s exactly what I was after, thank you!

Thanks for your time and help!

Cheers!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.