Docs

[Brock B]

For my header, I’d love to have the “stacked” look when viewing on mobile and tablet but the “inline” look when on mobile. I’m not sure how to get that. Any suggestions?

http://www.bravepandacreative.com

[Brock B]

Also my “Start Your Project” text on my button on the top right corner of my page is off center. How do I center that?

[Friech]

Hi There,

Thanks for writing in! But please clarify how do you want the header to look on mobile and how on desktop. Provide us a screenshot if you can.

For the button, please add this on your custom CSS

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
	padding-right: 20px !important;
}

Make sure you remove this:

<a class="x-btn x-btn-flat x-btn-rounded x-btn-regular" href="#example">Round Button</a>

From your custom CSS or else the given css wont work.

Cheers!

[Brock B]

Thanks for your help in getting that button text lined up! Works perfectly

In regards to the header, you can select the look to be “stacked” or “inline.” I love the “stacked” look for mobile but I’d like to have the “inline” look when people are looking at it on desktop. Is there anyway to make that happen.

Also, when I make the look “inline”, it looks fine on the desktop, but on mobile, the menu button is moved all the way to the right, as you can see in the screen shot. If I select “stacked” it looks great on mobile, but thats not the look we want for desktop.

Does that make sense?

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Brock B]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:979px){
a.x-btn-navbar {
    margin-right: auto !important;
    margin-left: auto !important;
    float: none !important;
    display: table !important;
}
a.x-brand.img {
    text-align: center;
}
}

Hope that helps.

[Author]

Posts