Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 17, 2018 at 8:20 pm #928560
    Fieldtripper

    1. Wondering if its possible to move the hover bar and active page below the menu up by about 20 pixels.
    http://cascade3.cascadeenergy-test.com/

    2. Is it possible have the active page bar stay on in the main menu when you are in subpages in a section?
    For example, when you are one level down in a section, to keep the parent page still showing the active state in the main menu?
    http://cascade3.cascadeenergy-test.com/strategic-energy-management/

    March 17, 2018 at 8:45 pm #928562
    Mike

    Hey Fieldtripper,
    I was unable to view the page without a password. Please provide.

    Best regards,
    Mike

    March 17, 2018 at 11:36 pm #928583
    Fieldtripper

    Opps. I just placed it in the private content

    March 18, 2018 at 3:45 pm #928722
    Mike

    Hi,
    1: Try this code in the General Styling > Quick CSS field:

    .avia-menu-fx { bottom: 15px!important;  }

    For the second question, please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    March 18, 2018 at 7:47 pm #928768
    Fieldtripper

    Mike, couldn’t get that bar to move up with the code.

    Here’s what I have in the css quick code:

    /*nav state bar*/
    .header_color .avia-menu-fx { border-bottom: solid 4px #64a6c4 !important; }

    /*move menu bar up*/
    avia-menu-fx { bottom: 15px!important; }

    Log in credentials attached here.
    Any help would be greatly appreciated.
    -Michael

    March 18, 2018 at 8:43 pm #928786
    Mike

    Hi,
    You were missing the dot in front of the rule, I added and now is working.
    As for the issue were sub-menu pages are not causing the main menu underline to not show up, I found that it’s because the sub-pages need to have the main menu page as their “parent page”
    For example, the page “Water & Wastewater” has the Parent Page: Utilities.
    when this is set the main menu gets the class “current-page-ancestor” so that this css will work to make the line show for under the main menu item:

    .current-page-ancestor .avia-menu-fx {
    opacity: 1!important;
    visibility: visible!important;
}

    Best regards,
    Mike

    March 18, 2018 at 9:02 pm #928789
    Fieldtripper

    Mike, Wow! Thanks for the help! Works perfectly now.

    A couple more questions if you have time:

    1 Main menu – change the color of the hover bar to be different than the active state.

    2 Can the full width menu bar be set to have hover and active state for the background of each menu item? for Instance a slightly darker gray then the background of the bar?

    Thanks much

    -michael

    March 19, 2018 at 12:19 pm #929018
    Mike

    Hi,
    1: To change the color of the bar please look at the second rule in your General Styling > Quick CSS field:

    .header_color .avia-menu-fx { border-bottom: solid 4px #64a6c4 !important; }

    and change the color code to suit.
    2: To add a bar to the sub-menu, I added this code to your General Styling > Quick CSS field:

    /*sub-munu bar*/
#top .av-submenu-container .avia-menu-fx {
    display: initial!important; 
}
#sub_menu1 .current-page-ancestor .avia-menu-fx {
    opacity: 0!important;
    visibility: hidden!important;
}
#sub_menu1 .menu-item a { padding-bottom: 15px!important; }

    the color happens to be set by the theme, and seems to be what you asked for.

    Best regards,
    Mike

    March 21, 2018 at 5:28 am #930276
    Fieldtripper

    Mike,
    Thanks for the help on the sub menu
    After reviewing it, would it be possible to have the hover and active state be the background of the entire link, similar to how your pulldown menus work?

    The hover would extend the entire height of the bar, and the active state would be a color the full width and height of the link.

    Any advice would be appreciated!

    March 21, 2018 at 5:54 am #930314
    Fieldtripper

    One more question to add to the question above:

    Is it possible to move the content of the full width submenu into the content width including the padding inside the left and right links?
    And reduce padding to fit this amount of items?

    http://cascade3.cascadeenergy-test.com/industrial-energy-management/

    Thanks much in advance!

    March 21, 2018 at 11:19 am #930490
    Mike

    Hi,
    To adjust the width of the sub-menu to accommodate 8 items, please try this code:

    @media only screen and (min-width: 1307px) { 
#top.page-id-11 #sub_menu1 .av-subnav-menu li a {
    padding: 0 25px!important; 
}
}
@media only screen and (min-width: 1019px) and (max-width: 1306px) { 
#top.page-id-11 #sub_menu1 .av-subnav-menu li a {
    padding: 0 7px!important; 
}
}

    note that this code is written to only work on this one page, if you want to use it for every page, please remove “.page-id-11” from the code.
    I noticed that for your mobile & tablet the sub-menu could use some adjusting, please try this code, if you wish:

    @media only screen and (max-width: 1019px) {
.responsive #top #wrap_all #sub_menu1 .container {
    width: 100%!important; 
    max-width: 100%!important; 
}
#top #sub_menu1.av-submenu-container .container {
    padding: 0px !important;
}
#top #sub_menu1 .av-subnav-menu li a {
    padding: 0 10px!important; 
}
}

    Best regards,
    Mike

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