Archived topic

Adding a responsive secondary footer menu

60 replies · Started by Mo on September 2, 2015

Viewing posts 31–45 of 61

September 21, 2015 at 11:11 am #138559

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
}

September 21, 2015 at 12:23 pm #138584

Perfect!

Thanks Tom.

September 21, 2015 at 6:26 pm #138652

You're welcome!

September 24, 2015 at 6:20 am #139325

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.

Thanks.
===

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?

September 24, 2015 at 10:25 pm #139557

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.

September 25, 2015 at 8:44 am #139691

Great!

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.

September 25, 2015 at 11:05 am #139723

Glad it's working! :)

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

September 25, 2015 at 5:52 pm #139801

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.

Thanks.

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

September 28, 2015 at 5:38 pm #140506

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

Thanks

September 28, 2015 at 11:07 pm #140538

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.

September 29, 2015 at 3:36 am #140618

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!

September 29, 2015 at 9:22 am #140691

No problem! Glad I could help :)

October 5, 2015 at 7:38 pm #142175

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.

Thanks.

October 6, 2015 at 12:08 am #142216

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 :)

October 6, 2015 at 2:59 pm #142419

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.

Thanks

This archived topic is closed to new replies.

Start building better websites today.