Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #306873

    Hello,
    Thanks for a great theme. I am using it to change a clients site to a responsive site (locally at this stage).
    At this stage I have run into some problems with the main menu/drop down. I’ll try to explain as good as I can what I want to achieve and what’s going wrong. I’m using the header with logo left and menu below. I’ll add the css used at the end.
    1) The main menu (first level) should be black letters with no background. When hovered it changes font color to white and adds a black background with rounded top right and left corners. And this should also remain when clicked (active state). This I have managed to achieve and it also works. Here a link to the present site to illustrate: http://www.easyblast.fi/index.php/blastring

    2) The sub menu (drop down) should have white background with blue font (#032366). When hovered (and also active state) it should change the menu item font color to white and background color to green (#55a51c).

    Now to the problems:
    A) When hovering the the drop down menu items the font color and background color changes as they should, BUT the rounded top left/right corners from the main level follows down to the sub menu, which it should not.
    B) When you are on a sub page, the main (parent) level menu item is no longer highlighted. And on the drop down sub menu “active” page is only the menu word(s) highlighted and not the whole menu item.
    C) Also when you hover on a main level to get the drop down visible and then moves the cursor down on the drop down, the background hover state disappears from the main level item, which as the font color is white with white background means that it gets invisible.

    Phew, this was quite a long one, but here is still the css (I started from a snippet found on the forum) for you to look at:
    – – – –
    /* idle */
    .avia-menu-text{color: Black; }
    .sub-menu .avia-menu-text {color: #032366!important; }

    /* hover */
    #top .main_menu ul:first-child>li a:hover {
    color: #FFFFFF;
    background-color: #000000;
    text-decoration: none;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }

    li.menu-item:hover .avia-menu-text {color: White; }

    .sub-menu li.menu-item:hover .avia-menu-text{
    color: white!important;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    }

    /* active */
    .main_menu .current-menu-item {
    color: #FFFFFF!important;
    background-color: #000000!important;
    margin-right: 10px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }

    .main_menu .current-menu-item span.avia-menu-text {color: #FFFFFF!important; }

    .sub-menu .current-menu-item span.avia-menu-text {background-color: #55a51c!important; }
    – – – –
    I really hope that you are able to help me with this one.

    Cheers

    #307508

    Hi Rainer!

    We need to see the website live in order to help you with these requests, please let us know when you go live.

    Best regards,
    Josue

    #307716
    This reply has been marked as private.
    #308355

    Hey Rainer!

    Try adding this code to the Quick CSS:

    .sub-menu li a{
        border-radius: 0 !important;
    }

    Cheers! 
    Josue

    #308684

    Thanks! That did the trick for the rounded corners.
    Any ideas/suggestions for the green hover underline thing?
    Regards,
    Rainer

    #308740

    Hey Rainer

    Please try adding following code to Quick CSS

    .avia-menu-fx { width: 90%; }

    Best regards,
    Yigit

    #308846

    Hello Yigit,

    Thanks for the help. I had to put an !important afterwards to get it to function. But this means reducing all items equally much and since the menu items all have different width (different amount of letters) I decided to give them individual width percentages. Since the top menu doesn’t change that often, I think it is the easiest way at the moment. So that resolves it for now and thanks once again for your help.
    Here’s still an example of the css style if someone else needs it (the menu-item-number should of course correspond to the right menu item respectively):
    #menu-item-2988 .avia-menu-fx { width: 86.5%!important; }

    Cheers, Rainer
    ps. but if you can think of a way to get it to adjust automatically I’d be glad to hear about it :-)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘CSS for main menu follows on to drop-down submenu’ is closed to new replies.