Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #647927

    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, 6 months ago by spleeky.
    #647953

    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

    #647965

    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.

    #648311

    anyone?

    #649150

    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

    #649198

    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

    #649479

    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, 6 months ago by spleeky.
    #649490

    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

    #650357

    Hi Yigit, this worked perfectly.

    Thanks very much!

    Regards,

    Spleeky.

    #650430

    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

    #651053

    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

    #651161

    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?

    #651465

    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

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