Docs

[Ann]

Hi hi,

Is there a way to force the “Burger” menu on mobile view to the right? As of now it ends up below the logo, making the nav bar look massive.

Thanks for help 🙂

Ann

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Ann]

Oh my god, I’m sorry!

parronhall.com 🙂

[Friech]

Hi There,

Look for this block of custom CSS on your Customizer.

	.x-navbar-inner {
  		padding-right: 160px;
	}

And update that to:

@media (min-width:  980px) {
	.x-navbar-inner {
  		padding-right: 160px;
	}
}

And on a extra small screen, we need to adjust the width of the logo “PARRON HALL” so they would fit on the navbar.

Add this on your custom CSS.

@media (max-width:  480px) {
	.x-brand.img {
		width: 80%;
	}
}

Hope it helps, Cheers!

[Ann]

PERFECT!

Works great! 🙂

Thank you!

[Paul R]

You’re welcome! 🙂

[Ann]

Hey,

Sorry for writing in this thread again but I’ve been playing around with the code for a while now and for some reason I can’t make the mobile menu on my site (http://www.parronhall.com/) to appear sooner than what it does now?

Could you tell me what I need t add/change in addition the above CSS?

Thanks!

[Lely]

Hello Ann,

Please use this CSS:

@media (max-width: 1155px){
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}
.x-nav-wrap.desktop {
    display: none;
}
}

Adjust 1155px to your preferred screensize.

Hope this helps.

[Ann]

Hey there,

It worked for the width but when you click the burger menu nothing happens. Did I miss something?

Thanks,

Ann

[Paul R]

Hi Ann,

Kindly replace the code with this.

@media (max-width: 1155px){
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}
.x-nav-wrap.desktop {
    display: none;
}

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

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

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

}

Hope that helps.

[Ann]

Now it works. Thanks guys!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts