[Resolved] Adding a responsive secondary footer menu

Home Forums Support [Resolved] Adding a responsive secondary footer menu

Home Forums Support Adding a responsive secondary footer menu

Viewing 15 posts - 31 through 45 (of 61 total)
  • Author
  • #138559
    Lead Developer
    Lead Developer

    Try this:

    #tertiary-navigation .sf-menu > .menu-item-has-children > a:first-child:after, 
    #tertiary-navigation .sf-menu > .page_item_has_children > a:first-child:after {
          border-top-color: transparent;
          border-bottom-color: inherit;
          margin-top: -8px


    Thanks Tom.

    Lead Developer
    Lead Developer

    Hi Tom,
    The menus are coming along but I spotted an odd behavior with the main navbar.

    A 5 px border has been added to the navbar and the navbar is sticky.

    Upon initial loading of the page, the navbar is perfectly centered, however, when the page is scrolled, the navbar shifts to the right by about 4 or 5 px.

    This occurs in the latest IE, Firefox and Chrome browsers.

    If you line the main navbar up with the header panel, it’s easier to see.

    Clicking on the Homepage link re-centers the navbar until it’s scrolled.

    The cause for this eludes me as it does not occur with the secondary or tertiary navbars.

    If the border is removed, there’s no problem.

    I thought initially it was due to enabling the search feature but disabling it changed nothing.

    Any ideas or suggestions would be appreciated.


    Received this error after attempting to send this email yesterday so it’s being resubmitted this morning:
    ERROR: Are you sure you wanted to do that?

    Lead Developer
    Lead Developer

    Hi Mo,

    In order to have a sticky contained nav, we have to do some math on the container width and do some margin left trickery.

    Since you have a 5px border, it throws off the calculation a bit.

    Add this to adjust it:

    @media (min-width: 1380px)
    .nav-below-header .navigation-clone.main-navigation, 
    .nav-above-header .navigation-clone.main-navigation, 
    .nav-below-header .main-navigation.is_stuck, 
    .nav-above-header .main-navigation.is_stuck {
        margin-left: -695px;

    If you change the container width, you’ll have to adjust.



    That’s one I would have never figured out without your kind assistance.


    Just a head’s up…

    There’s one final tertiary menu item I’m stuck on at the moment.

    I’m continuing to try different CSS to achieve the goal rather than bother you again.

    As it’s not a menu tied into the Customizer, I’m probably missing something again but I’m keen to try to find a solution first.

    That’s that best way to learn these things rather than being spoon-fed.

    If the solution escapes me, I’ll need your help once more.

    That would put the entire menu issues to rest.

    Can’t thank you enough!


    One other issue I mentioned long ago (in a galaxy far away) is a Woocommerce related layout problem that pertains to a sidebar not appearing.

    There are some ideas that I’ll try out first before seeking your guidance.

    As I’ve not addressed it myself yet, I’ll wait to pester you on it.


    Other than that, all other plugins have been performing perfectly.

    The forum and knowledge base are chock full of useful information and ideas as well.

    Lead Developer
    Lead Developer

    Glad it’s working! πŸ™‚

    Let me know if you can’t sort out the other issues.


    Hi Tom,
    It’s time to admit I’m beat on this mod.

    I’ve tried adding this css:

    .secondary-navigation .main-nav ul .current-menu-item > a, .secondary-navigation .main-nav ul .current-menu-parent > a, .secondary-navigation .main-nav ul .current-menu-ancestor > a, .secondary-navigation .main-nav ul .current_page_item > a, .secondary-navigation .main-nav ul .current_page_parent > a, .secondary-navigation .main-nav ul .current_page_ancestor > a {
        background-image: none;
        -moz-border-radius: 35px; 
        -webkit-border-radius: 35px; 
        border-radius: 35px;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

    Hoping that simply replacing “secondary” with “tertiary” would be the ticket however since this is not a standard menu it wasn’t a surprise to see it fail.

    What is required to make the active menu items highlighted as in the main and secondary menus?

    The search though support yielded some interesting finds but nothing that helped for this scenario.


    BTW. This should be the last of the styling requests for the menus.


    Hi Tom,
    I’ve pent the weekend and today searching and trying out wordpress.org’s forum regarding the highlighting menu items without any success.

    The possible solutions all appear similar however, there must be a problem in how I’m selecting the element.

    I’ve used: #tertiary-navigation & #tertiary-navigation like this example:

    .tertiary-navigation .main-nav ul .current-menu-item a, 
    .tertiary-navigation .main-nav ul .current-menu-parent a, 
    .tertiary-navigation .main-nav ul .current-menu-ancestor a, 
    .tertiary-navigation .main-nav ul .current_page_item a, 
    .tertiary-navigation .main-nav ul .current_page_parent a, 
    .tertiary-navigation .main-nav ul .current_page_ancestor a

    which are similar to the wordpress.org support forums responses.

    Not to mention using every combination of ul and li a in conjunction with the above code.

    No changes.

    I’m right out of ideas now.

    Could you provide the CSS solution?

    The other consideration is that it’s a js issue, then it’s out of my coding ability


    Lead Developer
    Lead Developer

    Since you’ve added the menu using plain HTML, highlighting current menu items isn’t possible, as the PHP has no control over that HTML.

    In this case, you’ll want to do what I suggested in this post: https://generatepress.com/forums/topic/adding-a-responsive-secondary-footer-menu/page/2/#post-136630

    Doing it that way allows WP to generate the menu for you, and will also add the current classes to the menu items.


    Hi Tom,
    I kind of suspected something was missing in the current coding setup. Just couldn’t figure exactly what it was.

    Thanks for pointing me back to your earlier suggestion.

    Trying out the plugins mentioned will be of benefit for some other mods that are currently on hold.

    Since it’s not possible to complete the mod with PHP coding, the plug in route is worth a shot.

    You may recall that it’s my goal to minimize plugin use however, since this is a mod that would complete the website’s styling, it’s definitely a “must have” addition.

    I’ll definitely be trying out the hooks addon as well.

    The Woocommerce issue was resolved by searching the forum. As always a valuable resource.

    If there’s any more problems, you’ll know it.

    As always, thanks!

    Lead Developer
    Lead Developer

    No problem! Glad I could help πŸ™‚


    Hi Tom,
    It’s time to pick your brain.

    After much trial and error, the footer menu now highlights the current menu item which is due to using the code you provided here.

    Stuck on the last bits regarding how the menu is deployed..

    3 issues:

    1) On the “About Us” and “Support Tickets” links the dropdown toggle icon is pointing down, however the CSS indicates that it’s using the fa-caret-up.

    Haven’t found a solution to fix that.


    2) Flyout sub-menu direction is up, however, the sub-links don’t line up with the fa-caret-right icons.
    for example, on the “About Us” link the “Terms of Service” sub-link doesn’t line up with “Placeholder 01”.
    Have not been able to find a way to line that up. Same thing occurs with “Supports Tickets’ sub-link “My Tickets” which should line up with “Edit Billing Address”.


    3) The mobile menu is now broken. I believe that it’s because it’s not accessing the correct js?


    Anyway, these requests are being submitted rather late as I’m an hour ahead so when ever you can check these issues out is fine.

    Really close not to putting the footer menu to rest. (Famous last words)

    Please ask for clarification if my requests are kind of muddy.


    Lead Developer
    Lead Developer

    Hi there,

    1. The caret is actually only used on mobile. Otherwise, the arrow is controlled by the CSS I posted here: https://generatepress.com/forums/topic/adding-a-responsive-secondary-footer-menu/page/3/#post-138559

    2. I’ve adjusted my CSS here to fix this: https://generatepress.com/forums/topic/adding-a-responsive-secondary-footer-menu/page/2/#post-136799

    3. This is most likely related to this: https://generatepress.com/forums/topic/navigation-menu-not-working-on-mobile-site/

    Hope this helps πŸ™‚


    Hi Tom,
    No resolution to the 3 issues.

    1) added the css with no change in the caret arrow. I don’t understand when you sway that the caret is used only on mobile.
    Why is it used in the desktop menu then?
    Firebug says that the fa-caret-sown – actually fa-caret-up but the font-icon doesn’t display it?

    2) The css that worked for me was this but the flyout links don’t line up.

    .tertiary-navigation .menu li .sub-menu {
        top: auto;
        bottom: 40px;

    There was no change adding the CSS from the previous post.

    3) Used option A, and the theme update immediately. No change.

    Would it help if I gave you the login credentials to the site?
    That way you could check the hook, etc.

    It’s kind of difficult to explain what is happening on that footer menu.


Viewing 15 posts - 31 through 45 (of 61 total)
  • You must be logged in to reply to this topic.