Docs

[beatricemartini]

Hallo,
I’ve added this css to have
-inline navbar
-hide from the home page
– have the navbar content centered on desktop
– have the mobile button in center but…

on smaller devices the lines on the botton are on the right… how can I fix it?

body .masthead-inline .desktop .x-nav {
float:none;
}

body .x-navbar .desktop .x-nav>li {
display: inline-block;
float: none;
vertical-align: top;
}

body .x-nav-wrap.desktop {
text-align: center;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
clear: both;
float: none !important;
width: 60px;
text-align: center;
margin: 0 auto;
}

.home .x-navbar .x-brand { display: none; }

@media (max-width: 240px) {
.x-btn-navbar .x-icon-bars {
display: block;
margin: 0 auto;
width: 10%;
}
}

@media (max-width: 320px) {
.x-btn-navbar .x-icon-bars {
display: block;
margin: 0 auto;
width: 10%;
}
}

@media (max-width: 480px) {
.x-btn-navbar .x-icon-bars {
display: block;
margin: 0 auto;
width: 10%;
}
}

🙂

[beatricemartini]

Sorry, the thing is a bit different…
At the moment this is what i have:

-inline navbar
-hide from the home page
– have the navbar content centered on desktop

body .masthead-inline .desktop .x-nav {
float:none;
}

body .x-navbar .desktop .x-nav>li {
display: inline-block;
float: none;
vertical-align: top;
}

body .x-nav-wrap.desktop {
text-align: center;
}

.home .x-navbar .x-brand { display: none; }

I’d like to have the mobile button in the center only in home page.

I’ve tried this code but it didn’t work (it moves the button in all pages

.home .x-btn-navbar, .x-btn-navbar.collapsed {
clear: both;
float: none !important;
width: 60px;
text-align: center;
margin: 0 auto;

[Rue Nel]

Hello There,

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.

Thank you in advance.

[beatricemartini]

http://sviluppo1.ilbarone.net

[Lely]

Hi There,

From your current setup, to center mobile button, please also add this custom CSS:

@media (max-width: 979px){
.masthead-inline .x-btn-navbar {
    float: none;
    display: inline-block;
}
.x-navbar-inner >div {
    text-align: center;
}
}

Hope this helps.

[beatricemartini]

A lot better.
Perfect in home page, but in the other pages I’d like to have the mobile button on the right (like the original position).

[Joao]

Hi There,

Seems like you already achieved that.

Your button is centered just on your home page while on the others it is not.

Let us know if you need further assitance.

Cheers

[beatricemartini]

Hallo, no… it’s not on the right.

[Joao]

Hi There,

Please update the code provided by Lely from :

@media (max-width: 979px){
.masthead-inline .x-btn-navbar {
    float: none;
    display: inline-block;
}
.x-navbar-inner >div {
    text-align: center;
}
}

To

@media (max-width: 979px){
.home .masthead-inline .x-btn-navbar {
    float: none;
    display: inline-block;
}
.home .x-navbar-inner >div {
    text-align: center;
}
}

Hope it helps

Joao

[beatricemartini]

Great! Now is perfect!

[Nabeel A]

Glad we could help 🙂

Cheers!

[Rupok]

Glad that you are all set now. Have a nice day!

[Author]

Posts