Docs

[directinglife]

Dear X team

Is there a way to have the Navbar Background Colour match the page colour?

On dekstop view it’s fine because I have preset code that mean the Navbar is dark. However, on mobile view it creates a block of colour that looks odd against the page if it doesn’t match.

My first section on the homepage is coloured rgb(218, 228, 227) so I have made the default colour of the navbar rgb(218, 228, 227) so that it matches. However, if you go onto mobile view and look at this page (link in private reply), you will see that is creates a band of colour which doesn’t look very good. On other pages I have had to change the 1st section colour to match it, but this isnt a very good work around.

Any help much appreciated.

Many thanks

Charlie

[directinglife]

This reply has been marked as private.

[Thai]

Hi Charlie,

Please add the following CSS:

@media (max-width: 979px){
    .x-navbar {
        background-color: hsla(0, 0%, 37%, 0.07) !important;
    }
}

Hope it helps 🙂

[directinglife]

Thank you 🙂

[John Ezra]

You’re most welcome!

[directinglife]

Upon checking it, the code doesn’t seem to have fixed the problem. As you can see from the homepage there is a band of Color where the mobile button is.

[directinglife]

This reply has been marked as private.

[Lely]

Hi Charlie,

Please check this part of your custom CSS:

@media (max-width: 767px) {
.page-id-2029 .x-column.x-sm {
   margin-bottom: 1.5em;
}

.page-id-2029 .x-section {
   padding:0;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
    margin: 20px auto 0 !important;
    width: 46px !important;
    float: none !important;
}

Closing curly brace is missing for this line @media (max-width: 767px) {. Please add another one at the end.

From the previous reply, update this line: background-color: hsla(0, 0%, 37%, 0.07) !important; to your preferred color. Or better yet, give us a screenshot of what you want to achieve in mobile view.

Hope this helps.

[Author]

Posts