Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 13, 2015 at 10:46 pm #379159
    DigitalEssence

    Hi,

    I’m working on the menu just now and while I’ve managed to change a few of the things I need I’m stumped on the rest and would appreciate your help if possible.

    1) I’d like to have the menu aligned to the right as opposed to the left.
    2) I would like to change the colour of the active link, ie current-menu-item
    3) I would like to remove the border below the menu. I know it’s not the menu and some other element but I’ve spent quite some time trying to target it and just can’t manage.

    Thanks for your help.

    Here is the link to the site: http://imf.digitalessence.net/

    January 14, 2015 at 7:06 pm #379667
    Elliott

    Hey DigitalEssence!

    1. Add this to your custom CSS.

    .av-main-nav {
  left: 86px;
  position: relative;
}
.html_header_top.html_bottom_nav_header #top .main_menu .menu-item-search-dropdown { float: left !important; }

    2. You can change that in Dashboard > Enfold > Advanced Styling.

    3. Add this to your custom CSS.

    #header_main { border-bottom: 0px !important; }

    Regards,
    Elliott

    January 14, 2015 at 7:33 pm #379695
    DigitalEssence

    Hi Elliott,

    thanks for that.

    Request 1) This doesn’t line the menu up with the right hand side of the slider, it just pushes it along a bit (by 86px) so doesn’t look terribly great. I’m also keen to drop the search feature in the menu bar.

    When I tried dropping the search bar, I changed the left: 86px to 200px to allow the menu to align with the right hand side but this then doesn’t scale down very well responsively and ends sticking out to the right. I tried changing this to a percentage but it still occurred.

    Request 2) in Dashboard > Enfold > Advanced Styling. That only targets the a link colour whereas I need to change both the link colour and have the active link in a different colour. Unless I’ve missed something?

    Request 3) Perfect thanks.

    Thanks for your help.

    January 15, 2015 at 7:58 am #379892
    Ismael

    Hi!

    Thank you for the update.

    1.) Replace the code with this:

    .av-main-nav {
text-align: right;
}

.av-main-nav li {
float: none;
display: inline-block;
}

    2.) Use this to change the current-menu-item color:

    .header_color .main_menu ul:first-child > li.current-menu-item > a {
color: red;
}

    Regards,
    Ismael

    January 20, 2015 at 12:37 am #382207
    DigitalEssence

    Thanks Ismael.

    That sorted the menu position out but for the colour of the active menu link the Enfold theme uses two classes (for some reason).

    Out of interest (and for anyone else who wants to do this..)

    For the index/home page it uses current-menu-item but for the other pages it uses current_page_item so I added:

    .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a {
color: red!important;
}

    NOTE: You need to use !important to override any Main Menu Links colour changes made in Enfold options – Advance Styling – Main Menu Links

    FURTHER NOTE: I also found that by adding the display: inline-block; above that any children of the menu had spacing around the link elements.

    I fixed this by adding:

    .children li {display:block;}

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Float av-main-nav right and change colour of current-menu-item’ is closed to new replies.