Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 16, 2013 at 5:52 pm #189621
    jorgepelaez

    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.

    November 16, 2013 at 6:08 pm #189625
    Yigit

    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

    November 16, 2013 at 6:33 pm #189629
    jorgepelaez

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

    Take a look.

    http://goo.gl/xMVrHe

    November 17, 2013 at 6:14 am #189758
    Ismael

    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

    November 18, 2013 at 8:14 pm #190277
    jorgepelaez
    This reply has been marked as private.
    November 19, 2013 at 12:01 am #190349
    Yigit

    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

    November 19, 2013 at 11:46 pm #190743
    jorgepelaez

    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!

    November 20, 2013 at 5:50 pm #191036
    Yigit

    Hey!

    You can refer to this post to change the width to switch to mobile menu https://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

    November 20, 2013 at 5:56 pm #191046
    jorgepelaez

    Great now it looks much better.

    Thanks Yigit.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How to change main menu colors?’ is closed to new replies.