Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 18, 2014 at 4:40 pm #280630
    tocal

    Hi guys,

    I’m trying to style the top navigation of my site but I keep getting stuck. What I want to achieve is this but at the moment I have this. The following issues I can’t seem to solve or find answers to in the forum:

    1. Padding around logo – The logo is too tight to the top and bottom of the container. I’d like to add some white space around it.
    2. Making the navigation bar deeper – I need the white navigation container to be around 180px high.
    3. Off centre highlights – The hover highlights below the navigation text are off centre, pushed to the right.
    4. Drop down top border – The top border of the white box containing the drop downs doesn’t line up with my main menu bottom border.
    5. Drop down hover state – I can’t seem to style the :hover state of the drop down link to be green text with no background colour (see screenshot).

    Can you help me? Thanks guys!

    • This topic was modified 11 years, 5 months ago by tocal.
    June 18, 2014 at 6:02 pm #280670
    Yigit

    Hey tocal!

    Please add following code to Quick CSS
    1-

    .logo img {
padding: 20px 0;
}

    2- Please go to Enfold theme options > Header Layout > Header Layout > Header Size = Custom Pixel Value > Header Custom Height = 180px
    3- 

    .avia-menu-fx { left: -10px; }

    4- 

    .av-main-nav ul { top: 97%; }

    5- 

    .header_color .main_menu .menu ul li a:hover {
background-color: transparent;
}
#top .av-main-nav ul a:hover .avia-menu-text {
color: green !important;
}

    Regards,
    Yigit

    June 18, 2014 at 11:03 pm #280836
    tocal

    That’s awesome, thanks Yigit! The only thing left now is that the logo padding needs to be more like 40px on the main header but only 20px on the ‘sticky’ header (i.e. when you scroll down. Is that possible?

    Thanks

    June 19, 2014 at 2:31 am #280901
    Ismael

    Hey!

    Thank you for the update.

    You can add this below:

    .header-scrolled .logo img {
padding: 20px 0;
}

    Best regards,
    Ismael

    June 19, 2014 at 10:26 am #281100
    tocal

    Brilliant, thanks Ismael. Great support as always!

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