Docs

[XcitingWeb]

Hello,
I am finishing this website currently but ran into a problem (see attachments). The logo moves over the navbar on certain laptop-sized screen resolutions, causing the navbar to look all sloppy.

Is there a way to fix this?

(Shouldn’t the navbar resize dynamically, the logo resize or the header layout change from inline to stacked in certain screen sizes?)

I’d like it best if the logo would get smaller.

Thank you for your help!

[XcitingWeb]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1490px) {
body .x-nav-wrap.desktop {
    display:none;
}

body .x-nav-wrap.mobile {
   display:block; 
}

body .x-nav-wrap.mobile.collapse {
   display:none;
}

body .x-nav-wrap.mobile.collapse.in {
   display:block !important;
}

body .x-btn-navbar {
    display: block;
    float: right;
}
}

Hope that helps

[XcitingWeb]

Hi!
Thank you. Now the mobile menu shows up on mobile pages. Is a possible solution, but resizing the logo or nav would be better, wouldn’t it? (ui and ux wise)

[Friech]

Hi There,

Yes, you can add this custom css instead.

@media (min-width: 980px) and (max-width: 1468px) {
	.x-navbar .desktop .x-nav > li > a {
		font-size: 12px;
	}
	.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
		padding-left: 10px;
    	padding-right: 10px;
	}
	.x-brand {
		width: 18%;
    	margin-top: 30px;
	}
}

But the logo and navbar would become too small though.

Thanks.

[XcitingWeb]

Great! I used both and was able to increase the font size that way to make everything readable. Here’s the code:

@media (min-width: 1235px) and (max-width: 1501px) {
        .x-navbar .desktop .x-nav > li > a {
                font-size: 15px;
        }
        .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
                padding-left: 10px;
        padding-right: 10px;
        }
        .x-brand {
                width: 20%;
        margin-top: 18px;
        }
}

@media (max-width: 1234px) {
body .x-nav-wrap.desktop {
    display:none;
}

body .x-nav-wrap.mobile {
   display:block;
}

body .x-nav-wrap.mobile.collapse {
   display:none;
}

body .x-nav-wrap.mobile.collapse.in {
   display:block !important;
}

body .x-btn-navbar {
    display: block;
    float: right;
}
}

Thank you so much, this is solved!

[Friech]

Cool, we’re delighted to assist you with this.

Cheers!

[Author]

Posts