Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #189621

    Hi, how can I change the main menu colors?
    Can you provide with the custom css that I need to add in order to modify background color, font color, hover and active please.
    I’m sure it goes around the #top main something but I rather ask before making a mess with it.

    Thanks in advance.

    Jorge.

    #189625

    Hey Jorge!

    Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as desired

    .main_menu ul:first-child > li > a { font-size: 18px; color: red!important; background-color: green; }
    .main_menu ul:first-child > li > a:hover { color: orange!important; }
    .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: blue!important; }
    

    Best regards,
    Yigit

    #189629

    Hi, I added and it did not change the colors.

    Take a look.

    http://goo.gl/xMVrHe

    #189758

    Hi!

    The link you provided is not working. What type of header do you have? Please check on Enfold > Header > Header Type. Yigit’s code should work.

    Cheers!
    Ismael

    #190277
    This reply has been marked as private.
    #190349

    Hi!

    Please replace the code i posted previously with following one

    .header_color .main_menu ul:first-child > li > a { font-size: 18px!important; color: red!important; background-color: green!important; }
    .header_color .main_menu ul:first-child > li > a:hover { color: orange!important; }
    .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: blue!important; }

    Flush browser cache after applying the code and refresh your page a few times. If that does not work, please try adding the code to Custom.css file inside Enfold/css folder

    Regards,
    Yigit

    #190743

    Hello, now it is better. I added the code to the style.css.

    My last question for this part, why is the menu shorter that the rest of the body? Is it normal that I get a second row in an ipad?

    Thanks!

    #191036

    Hey!

    You can refer to this post to change the width to switch to mobile menu http://www.kriesi.at/support/topic/ie8-header-alignment-with-search-button/#post-190414
    And please add following code to style.css as well

    #header_main_alternate { background-color: #a50031; }
    #top .main_menu .menu>li:last-child>a { padding-right: 21px; }

    It should look like this http://i.imgur.com/5Xgnptb.jpg

    Cheers!
    Yigit

    #191046

    Great now it looks much better.

    Thanks Yigit.

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

The topic ‘How to change main menu colors?’ is closed to new replies.