Docs

[richardrabil]

Hi,
I made several css changes to the header of (scientificsessions.nutrition.org) to make it shorter (less height). But now when it goes into mobile it has lost most of its background color.

Currently I’m working on 2 site.
http://scientificsessions.nutrition.org/ <– this is the live site (this does have the changes and has the incorrect mobile drop down menu)

http://asn-devsite.slice-works.com/ <– this is the dev site (this does not have the changes I made but has the right height of the header.)

I would like to have both the shorter header and the correct mobile drop down header that matches the asn-devsite applied to scientificsessions.nutrition.org. I will provide credentials in a private note next to this one.

I hope that’s clear, Basically scientificsessions.nutrition.org has a weird mobile dropdown menu after I made some changes to the header for desktop.

[richardrabil]

This reply has been marked as private.

[richardrabil]

CORRECTION:

http://asn-devsite.slice-works.com/ <– this is the dev site (this does not have the changes I made **but has the right dropdown hamburger menu spacing.)

Sorry about that

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 979px) {
.x-nav-wrap.mobile.collapse {

    background: #24366e
}

.x-navbar .x-nav-wrap .x-nav > li > a {
   
    padding: 20px;
}
}

Hope it helps

Joao

[richardrabil]

Thank you for the speedy response. How could I get rid of that extra blue at the top?

Everything else looks great Thanks!

[Nico]

Hi There,

Add this in your Customizer > Custom > CSS:

.x-navbar .mobile .x-nav{
margin: 4px 0;
}

Let us know how it goes.

Thanks.

[richardrabil]

Perfect! That’s what I needed, thanks for your help!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts