Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 14, 2016 at 12:32 pm #647927
    spleeky

    Hi,

    I am using the following code to create a hover effect on my menu bar.

    #top .main_menu .menu li a:hover { background-color: #3365C2; color: #FFFFFF ; font-size: 20px !important; }

    However on the last menu item, the background hover doesn’t go wide enough so it looks bad, if you hover over the menu items and especially pay attention to the right most menu item you will see what I mean.

    How can i fix that?

    Also I would like to change the hover effect so it doesn’t go to the top of the section and bottom, but instead leaves some white space, like in this example i just made in photoshop,

    how can I achieve this?

    Thank you

    • This topic was modified 8 years, 5 months ago by spleeky.
    June 14, 2016 at 1:14 pm #647953
    Vinay

    Hey spleeky,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .html_main_nav_header.html_logo_left #top .main_menu .menu>li:last-child>a{
    padding-right: 14px!important;
}

    Best regards,
    Vinay

    June 14, 2016 at 1:26 pm #647965
    spleeky

    That’s just great. Working brilliantly thank-you.

    Do you have any idea about the second part of my question above, if it’s possible to only have the hover go partway up and down, like in the screen shot here: http://imgur.com/0ZGOHnG

    Thanks again

    Spleeky.

    June 14, 2016 at 11:12 pm #648311
    spleeky

    anyone?

    June 16, 2016 at 12:12 pm #649150
    spleeky

    Hi Kriesi support, am still looking for a way to make the menu hover only go part way up and part way down like in my mockup http://imgur.com/0ZGOHnG can you assist?

    thanks

    June 16, 2016 at 1:42 pm #649198
    Yigit

    Hi,

    According to this site – http://www.downforeveryoneorjustme.com/ your website is currently down. Can you please check the link once again?

    Best regards,
    Yigit

    June 17, 2016 at 1:31 am #649479
    spleeky

    Sorry yigit it’s in maintenance mode, i forgot i added that after i posted, I’ve just created an account for you to check and posted it in the private area, many thanks

    • This reply was modified 8 years, 5 months ago by spleeky.
    June 17, 2016 at 1:56 am #649490
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .av-main-nav > li > a {
    line-height: 60px!important;
    height: 60px!important;
}
.header-scrolled .av-main-nav > li > a {
    top: 0;
}
.av-main-nav > li > a {
    top: 30px;
    position: relative;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    June 19, 2016 at 7:40 am #650357
    spleeky

    Hi Yigit, this worked perfectly.

    Thanks very much!

    Regards,

    Spleeky.

    June 19, 2016 at 5:03 pm #650430
    spleeky

    Hi one other thing related to this if i may, i have implemented your code and it is working,

    I am wondering how I can get the current menu item to be highlighted in the same color? I managed to find this

    .current-menu-item span.avia-menu-text {

    }

    which has some impact, but when i added this

    .current-menu-item span.avia-menu-text {
    background-color: #03E613;
    padding:20px;
    color: white;
    }

    which is the closest pixel that matched the hover size it didn’t look right. Also when you hover over it, the hover extends past the colour of the current item so looks very wrong.

    So i am trying to highlight the current menu item in the same colour as the hover , and same size etc, so the current menu item is always highlighted. Private data provided above is all still valid, many thanks

    June 20, 2016 at 8:00 pm #651053
    Yigit

    Hi,

    Please use the code as following

    .current-menu-item > a { 
background-color: #03E613;
}
.current-menu-item > a > .avia-menu-text { 
color: white; 
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    June 21, 2016 at 1:20 am #651161
    spleeky

    Hi Yigit, you’re a true expert thanks for the help.

    It’s working exactly as I asked thanks. One thing I’ve noticed now is when the sticky header kicks in, because there is no border like on the main menu between the colour end and the end of the menu, it looks ugly like the photo i posted in the private data below.

    Is there some way i can add some spacing to the colour , like we did on the main menu , so the color isn’t continuous with the bottom of the sticky header?

    June 21, 2016 at 1:27 pm #651465
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    .header-scrolled .av-main-nav > li > a {
    height: 40px!important;
    line-height: 40px!important;
}

    and again check > character :)

    Best regards,
    Yigit

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