Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 22, 2013 at 10:12 pm #192073
    simplefly

    Hello. I have some questions about styling the header the way I need it to look. I’ve included a screen capture of the header and numbered the sections so you can see what area each question pertains to. Thanks in advance for your help.

    1.) I would like to add padding to the top of the menu so that I can align it with the bottom of my logo. I would also like to know how to make the menu items be #FFFFFF when static and #3b99a6 when you hover over it.

    2.) I would like to know how to change the background color of the drop-down menu.

    3.) I would like the font color of the menu items in the drop-down menu to be #666666 when static and #1b5885 when you hover over it.

    4.) I would like to make the trim color here be #3b99a6. Also, if you notice, the drop down menu under Minimally Invasive Spine Surgery has an overhang. This is the only menu item where the trim hangs over like that. The rest have the trim flush with the drop down menu. How can I fix this?

    Thank you.

    My website is located at http://shiaunycspine.com/dev/

    November 24, 2013 at 6:00 pm #192520
    Yigit

    Hey simplefly!

    Please add following codes to Quick CSS in Enfold theme options under Styling tab
    1)

    .main_menu { top: 29%; }
.header_color .main_menu ul:first-child > li > a { color: #FFFFFF; }
.header_color .main_menu ul:first-child > li > a:hover { color: #3b99a6 }

    2)

    .header_color .main_menu ul { background-color: red; }

    3)

    .header_color .main_menu ul { color: #666666; }
#top .header_color .main_menu .menu ul li>a:hover { color: #1b5885 ; }

    4)

    .header_color .avia-menu-fx { background-color: #3b99a6; }
.avia-menu-fx { width: 85%; }

    Regards,
    Yigit

    November 24, 2013 at 7:10 pm #192578
    simplefly

    Thanks for your help. However, I’m still having trouble with items 3 & 4.

    If you notice in my screengrab, the font color of the drop-down menu items didn’t change when static. The hover color change did work though. Can you please see why the static color didn’t change? Also, how can I make the hove font be bold as well?

    Lastly, if you look closely, you’ll see the trim changed to the right color, but now it’s too short. It used to be perfect on all except one menu item, but now it’s different sizes throughout.

    My website is located at http://shiaunycspine.com/dev/

    November 24, 2013 at 7:20 pm #192582
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #top .header_color .main_menu .menu ul li>a { color: #666666; }
#top .header_color .main_menu .menu ul li>a:hover { font-weight: bold; }

    That “trim” takes the width of main menu item. You can replace that code to the following one and it should be active only on that particular menu item 

    #menu-item-885 .avia-menu-fx { width: 85%; }

    Cheers!
    Yigit

    November 24, 2013 at 7:35 pm #192592
    simplefly

    I see what you’re saying. Is there a way to just eliminate that little trim line then? Also, is it possible to bring the drop down menu up about 5px? Lastly, how do I remove the bold from the main menu? Thanks for all your help.

    November 25, 2013 at 12:30 am #192669
    Yigit

    Hey!

    You can add following code to Quick CSS to hide it

    .avia-menu-fx { display: none; }

    You can add following code as well and adjust it to move submenu up and set font weight to normal

    .main_menu .menu ul { top: 94%; }
.main_menu ul:first-child > li > a { font-weight: normal; }

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Header Styling and Formatting Questions’ is closed to new replies.