Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 8, 2014 at 10:09 pm #288688
    hollymlewis

    I saw a similar post on this issue but might be different for me. I have a mega menu sub menu that is appearing about 200 or more pixels too far to the right. See “Trips” on the link below.

    When I inspect the html I see the element styling (“right: -514px”) that is causing the issue, but I do not know how to correct.

    <div class="avia_mega_div avia_mega2 six units" style="right: -514px; display: block; opacity: 1;">

    July 9, 2014 at 1:44 am #288726
    Yigit

    Hi hollymlewis!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #header .avia_mega_div { right: 0!important; }

    Regards,
    Yigit

    July 9, 2014 at 6:49 am #288868
    hollymlewis

    Thank you! I tried the CSS you provided and it did not quite have the effect I wanted. I went another route and added a “left: -150px” which moved things to the left where I wanted. It’s probably a sloppy fix and I haven’t looked at other browsers’ results, but it worked.

    One more question, I’m trying to add a hover effect and color but can only seem make the edit for the mega-menu links. Any suggestion on how to get the regular menu’s links to look like the ones on the “trips” and “about” menus? (blue background, rounded corners, white text).

    Thanks in advance for your CSS magic.

    July 9, 2014 at 10:39 am #288910
    Ismael

    Hi!

    Thank you for using the theme.

    Please add this on Quick CSS or custom.css:

    #top .av-main-nav > li:hover > a {
color: white;
background-color: transparent;
}

#top .av-main-nav > li:hover > a > .avia-menu-text {
background: blue;
padding: 5px 10px;
border-radius: 5px;
}

    Cheers!
    Ismael

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