Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
  • #665880

    I have searched in Enfold and on support for a simple way to change the color of the navigation bar. Other than selecting a completely different “Predefined color scheme” under General Styling, I haven’t found a way. I only want to change the color of the navigation bar – not all the other color scheme elements.

    All the replies in support seem to be giving custom CSS solutions. This is a surprise to me. It’s a very common setting in themes in general to have the ability to change the color of the navigation bar. I see how to use advanced styling to change the rollover background – but how can I change the default color of the main navigation bar?


    Hey Dandelion222,

    “Coming soon. This site is under development”. Can you please post temporary logins so we can see your website?

    Best regards,


    Oh gosh, sorry about that. I forgot I had the coming soon up. I’ll include below.



    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #top #header_main_alternate {
        background-color: red;

    It is dynamically applied as you said. Please request such option here –



    That appears to have had no effect. Is there really no way to change the navigation bar color in the many many setting options? I can attach a screenshot if that will help – although not sure how.

    I don’t know what you mean by “it is dynamically applied as you said.” When did I say that?


    Again, your solution had no effect. And what do you mean by “it [what is IT?] is dynamically [what to you mean by dynamically?] applied [applied to what?] as you said [when did I say that?].



    Please create a temporary admin login and post it here privately if you would like us to look into it.
    As you mentioned, it is predefined color and being loaded from dynamic CSS file.



    Ah, I see now re the “dynamically applied.” Thank you! Yes, I will post the temp login in the private area below. One moment.



    We will keep the thread open and wait to hear from you. Thread will be on hold and you can simply reply to reopen it.

    Best regards,



    I can’t see any login details in your last reply, not sure if you forgot maybe?



    Rats. I didn’t forget, I really did add the info to the “private content” window right away. But I was in a place with very spotty Internet so perhaps the connection was lost. I will do that again right now.


    Hi again,

    As I look through this thread I see I’ve given the login credentials a few times. Please use the most current password.



    Please change the code to following one

    #top #header_main_alternate {
        background-color: red !important;

    I tried that and it works. Then you can go to Enfold theme options > Advanced Styling and remove background values from main menu links



    Hi Yigit,

    That worked for the main navigation, thank you. However, I am having trouble with the Advanced Styling. I don’t see how to “remove” the background. I tried to simply set the color of the main menu links to the same hexidecimal I am using but that had no effect.


    I have also just noticed that this change also changed the footer background. Why?


    I am still so stunned that with all the things Enfold lets one easily edit, that there is no way to simply change the navigation bar (only) background color. That is such a common thing one wants to change.

    I want to change the navigation bar, only, not the footer or other elements.


    Oh – sorry – I think the footer was tied to a different change I tried. I just didn’t notice it until right after I added the nav bar CSS. Please ignore that part.


    I suspect I may need another “important” CSS edit in order to remove the background color of the selected color scheme.


    Also, is it possible to narrow the height of the navigation bar at all?



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

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
        height: 25px!important;
        line-height: 25px!important;
    #avia-menu {

    Best regards,


    Unfortunately that did not have the desired effect. The actual links in the navigation still have a different colored background and this just shifted that section down and out of the main navigation bar.


    This still isn’t working. Can you help?



    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to or dropbox and share the link here :)

    Best regards,


    Just go to the homepage to see what I mean. The nav is mostly burgundy, but under the actual navigation links it is blue.

    • This reply was modified 7 years, 8 months ago by Dandelion222.

    Ok. I don’t know why that just took an incomplete screenshot of the site instead of giving a clickable link. Can you go to the site?


    I don’t have an imgur account and don’t want one. And I don’t really want to post a shared link to this thread for dropbox. Is there no way to attach a screenshot or no place I can email it to you? I’ll add the homepage link in the private box below.



    You don’t need an account to post images to Imgur, simply click the green button on the top reading New Post and upload, you can post the URL to the image here afterwards.



    You don’t need me to take a screenshot of a live site. Just go and look at that URL! I will include it, yet again, in the private section below.

    This is getting ridiculous. 2 weeks just on changing the color of the navigation bar! You have the url, you have the login credentials. Do you really need either? Its just a color change of a navigation bar.

    Anyway, please look. The solutions you have provided did not have the desired effect.

    • This reply was modified 7 years, 8 months ago by Dandelion222.

    I dug into the developer console and I figured it out myself. For people who may be interested, I had to also edit this CSS:

    #top #header .av-main-nav > li > a {
    background-color: transparent !important;

    I think it pulls the color from the template so you have to tell the background color to go back to transparent and you really do have to make that important or it doesn’t work.



    Great, glad you got it working and thanks for sharing. Let us know if you should need any further help on the topic.

    Best regards,

Viewing 30 posts - 1 through 30 (of 30 total)
  • You must be logged in to reply to this topic.