Docs

[SEVERO]

Hi there, there’s a few things I’m trying to change in the mobile view. Is it possible to do the following?

1. Centre logo
2. Centre Mobile Navbar button
3. Remove background (grey area on the sides) which would make the view a little wider.

http://www.mad-daily.com

Thanks

[Jade]

Hi there,

Please add this code in the customizer:

@media (max-width: 979px) {
    .x-brand {
        width: 100%;
        text-align: center;
        clear: both;
        float: left;
        margin-bottom: 20px;
    }

    .masthead-inline .x-btn-navbar {
        width: 35px;
        float: none;
        clear: both;
        margin-top: 15px !important;
    }

    body.myatu_bgm_body {
        background-color: #fff !important;
    }
}

Hope this helps.

[SEVERO]

Hi there, the only thing that worked was the logo and Navbar button was moved to the left

Also, looking at the code at the end. Is that removing the background or making it white?

Cheers

[Paul R]

Hi,

Kindly change the code to this.

@media (max-width: 979px) {
    .x-brand {
        width: 100%;
        text-align: center;
        clear: both;
        float: left;
        margin-bottom: 20px;
    }

    .masthead-inline .x-btn-navbar {
        width: 35px;
        float: none;
        clear: both;
        margin-top: 15px !important;
    }

    body.myatu_bgm_body {
        background: #fff !important;
    }
}

The last code will make the background white and remove the background image.

Thanks

[SEVERO]

Sorry, probably didn’t make myself very clear. Wanting the background are removed so your view is wider and the Navbar Button is still left aligned.

I’ve attached an image of how it currently looks and how I want it to look.

Cheers

[Paul R]

Hi,

Thank you for the clarification.

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
.x-boxed-layout-active .site {
   width:100%;
}
}

Hope that helps.

[Author]

Posts