Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #669108


    I’m working on a site that is using a child theme of Enfold and need to change the design of the header to look like this screenshot (opens in a new tab) and it currently looks like this (opens in a new tab). Basically, I need the background color (from edge to edge) of the logo area to be a solid #042843 and the background color of the nav to be rgba(4,40,67,0.5).

    I’ve tried:

    #header_main_alternate {
        background: rgba(4,40,67,0.5) !important;
    #header_main {
        background-color: #042843;

    .. but #header_main encloses the navigation too so that you can’t see the transparency of the navigation. I need the logo area to be separate from the navigation bar. Is there a way to do this in the functions file or anywhere else?

    I’m working on a local installation but the link to the live site is below (private content), if you want to inspect anything.

    Thank you!

    • This topic was modified 3 years, 8 months ago by  MFSdesign.

    Hey MFSdesign,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .container.av-logo-container > .inner-container {
        max-width: 1030px;
        margin: auto;
    .container.av-logo-container {
        background: #042843;
        max-width: 100%;

    Please make sure that > sign is not converted to – in Quick CSS field.

    Best regards,


    Fantastic, that works! Thanks a bunch! :)



    You are welcome!
    For your information, you can take a look at Enfold documentation here –
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here –
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)


Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Need to separate the logo area from the main menu nav’ is closed to new replies.