Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 26, 2015 at 6:58 pm #434898
    fjhughes

    Hello,

    I’m trying to modify the menu header to fit the design. This screenshot http://screencast.com/t/RW0s5YllVzZs shows the website on the top and the bottom shows the pdf design I am trying to achieve. I need the menu to be centered, the main menu links background color needs to be black. The top header is an image, the hover should be colored and I need to remove the underline on the menu links. The logo is the first item in the menu, and I don’t need the real logo, unless it can be moved to the menu area. Right now the Enfold logo shows at the top even though I have cleared the logo from the entry in the theme options. Also need to have no border lines on the menu. I also noticed a little gap at the top.

    I’ve tried implementing some Quick CSS that I have found in the forum, but I can’t quite get it. I use firebug to try and find the ID’s and Classes to modify, but there are so many. And when I try the Quick CSS and don’t see changes, I don’t think I got it right.

    The slider images and top image aren’t final, I’m waiting on them from the designer, so I just clipped them out of the PDF for placeholders.

    url: http://tsgaz.net/sfmd/

    Thanks!

    -Fred

    April 27, 2015 at 6:54 pm #435519
    Yigit

    Hey Fred!

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

    .av-main-nav > li > a, #header_main_alternate {
  border: none!important;
}
.html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
  height: 50px;
 padding-top: 7px;
}

    Then go to Enfold theme options > Advanced Styling tab and edit “Main menu links”

    Regards,
    Yigit

    April 27, 2015 at 10:09 pm #435677
    fjhughes

    Thank you Yigit. I added that code to Quick CSS and modified Advanced styling. I removed the Quick CSS I added previously, except for this one…

    .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
  line-height:18px;
}

    It looks ok now, except, there is still an ‘underline’ and no hover on each menu item. Also the black background does not continue all the way to the end, it only covers from the first menu to the end of the last menu item. And the Enfold Logo is at the top middle. How can I remove it?

    Thanks!

    -Fred

    April 27, 2015 at 10:20 pm #435685
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #header_main_alternate {
  background-color: black;
  height: 50px;
}
.avia-menu-fx, .logo, .responsive .logo { display: none !important; }

    Cheers!
    Yigit

    April 28, 2015 at 1:41 am #435748
    fjhughes

    Almost there! :-) What do I need to put in Quick CSS for hover to be this color: #C0322E

    I had this in there, but doesn’t seem to be working…

    #top .main_menu .menu li a:hover { background-color: #C0322E; color: white; 
}

    Thanks!

    April 28, 2015 at 12:39 pm #435968
    Rikard

    Hi!

    I added the !important statement to your CSS, maybe that helps?

    #top .main_menu .menu li a:hover { 
background-color: #C0322E !important; 
color: white !important; 
}

    Best regards,
    Rikard

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