Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 19, 2014 at 11:01 am #239991
    Labhanshi

    Hello Support,

    I am trying to achieve the colored border effect showing while hovering mouse on Menus under Header, as shown in Demo.
    But in my site i am not being able to get that. I have tried to explain via screenshot.

    Kindly let me know what options do i need to change in backend so as to achieve the desire effect. I tried with few settings under Theme Options > Styling > Header, but unable to get that.

    http://i.imgur.com/O1ZkLRe.jpg

    Site: http://www.labhanshicreations.com

    Kindly help me.

    Thanks

    March 19, 2014 at 3:33 pm #240093
    Yigit

    Hi Labhanshi!

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

    .header_color .avia-menu-fx { background-color: #fe05d0!important; }
#top .av_header_transparency .avia-menu-fx { opacity: 1; filter: alpha(opacity=1); }

    Cheers!
    Yigit

    March 20, 2014 at 10:00 am #240588
    Labhanshi

    Hello Yigit,
    First line of code works, but second i think not. Let me explain more what is still not working-

    1. Small top headed arrow (just above the border line in center) is still not showing on active (current) menu, as what is shown in demo.

    For 2nd question (in my last screenshot), i managed to find out. I remove Border colors (or change it as desired) from Options > Styling > Header.
    This was the one- (Upon mouse hovering, it is showing brownish colored border below menu names just on top of sub
    menu (fly-over), but in mine it is showing all over covering the whole box of sub menu items.)

    2. Upon Scrolling down a bit on Home page or any other, except the current (active) Menu the rest of the Menu Items are still dimmed (very light in color), unable to see.

    3. The same with sub menus items are still dimmed out, and that too without even scrolling down.

    PS: I want Header background remain to be transparent, but menus and /or menu item names should be visible.

    Can you please guide which setting will the 2nd line of code affects, provided by you.

    Thanks

    March 21, 2014 at 4:32 pm #241235
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .header_color span { border-color: #f0520e!important; }
.header_color .main_menu ul:first-child > li > a, #top .main_menu .menu li ul a { color: red; }

    Please edit your pages where you would like to use transparent header and choose to display "transparent header" under Layout http://i.imgur.com/6mB39C6.jpg

    Regards,
    Yigit

    March 21, 2014 at 6:18 pm #241304
    Labhanshi

    Hello Yigit,

    Thanks for providing additional custom code.
    But unfortunately, still couple of things not working.

    1. While hovering on the Menu item “Portfolio”, it is not showing the colored Border at bottom of the Portfolio menu. (Means not showing border at bottom for those Menu items who are having sub-menus as drop down).

    2. After scrolling down about 1 inch or so, when we hover the same menu item “Portfolio”, it shows border, but only with the same length of the Portfolio menu name. I want it to extend, so as to cover the whole top fly over menu of the drop down. Extending from far left to far right of the fly over sub-menu.
    Exactly the same way as it is reflecting in the demo.

    3. I choose “Alternative Background Color” to be white. But that is creating few problems. The background color of the Top Most header (showing social icons), the background of Search box also changes to white.
    Also, the background on mouse hover for sub-menu items also changes to white, resulting, the menu items gets no more visible, as they changes to white color.

    Kindly help me.
    Thanks

    March 24, 2014 at 2:50 pm #242090
    Yigit

    Hey!

    Please add following code to Quick CSS as well and adjust

    .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
border-top-color: #f0520e!important;
}
#top .header_color .main_menu .menu ul li>a:hover {
color: black;
}
#header_meta { background: red; }

    Regards,
    Yigit

    March 26, 2014 at 1:23 pm #243312
    Labhanshi

    Hello Yigit,

    These codes works like charm. Thanks.

    However, just one thing left. If i click on Menu Name – “Portfolio”, and after page reloads. When i mouse hover on Portfolio Menu again, it shows first entry of Sub Menu “Portfolio 4 columns” as dimmed (light grey), which is not visible. The same case with any other active sub-menu item.
    So, is there any setting from options which just reflects the color of ACTIVE sub-menu item.
    If not, i would appreciate, if you could let me know the Quick CSS for this.

    Thanks

    March 26, 2014 at 4:20 pm #243406
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a { color: red; }

    Cheers!
    Yigit

    March 27, 2014 at 12:57 pm #243801
    Labhanshi

    Hello Yigit,

    That code also works perfectly. :)
    Thanks, the ticket can now be closed

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How to achieve bottom colored border effect under Main Menu of Header like Demo’ is closed to new replies.