Move navigation items to bottom of slide out menu?

Hi there,

the Off Canvas has its own widget area. In Customizer > Widgets > Off Canvas - add you links there.

I tried that - but they appear only a few pixels down from the navigation links - I want them at the bottom. Is it possible to move the widget area down there with some CSS?

Can you share a link to the site so i can see the layout.

Attached

Try this CSS:

#generate-slideout-menu.main-navigation .inside-navigation {
  flex-direction: column;
  height: 100%;
}

.slideout-widget {
  margin-top: auto;
}

That worked perfectly, thanks!

Would you also happen to know how to make those links the same font/size/color as the normal menu items up top?

I would create a new Menu for those links and then add a Navigation Menu widget instead of a text widget - it should respect the menu styles.

I did that now, but it didn't apply the styles

It uses the Customizer > Typography > Primary Navigation styles

If I change the font size there, it also affects my two icons in the header. How can I make sure that the icons stay the same while I can adjust the font size of the text? the icons are set at 28px but I want the text links to be 17px

Also 2 issues:
- On mobile, I have to scroll down to see the items. They should be in view without having to scroll
- It has more margin on the left side than the items up top (when the font size is set at 17px)

Ok maybe best to take a step back. Instead we can include those 'footer' links in the main navigation and use some CSS to force them to the 'foot' of the off canvas. This will keep all links the same style.

To do that:

1. Remove the navigation widget and its menu.
2. Add the links to the end of your primary menu.
3. Give the first of those 'footer' links a class of footer-link

This article explains how to add the class to the menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

4. Remove the CSS i provided above.

Once thats there i can provide the CSS to position them.

Done!

Two things:

1. the footer-link class only needs to be added to 1st menu item - currently that is the Kontakt OSS.

2. Add this CSS:

#generate-slideout-menu.main-navigation .inside-navigation,
#generate-slideout-menu.main-navigation .main-nav,
#generate-slideout-menu.main-navigation .main-nav>ul{
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  max-height: 100vh;
  align-items: flex-start 
}

#generate-slideout-menu .slideout-menu li.footer-link {
  margin-top: auto;
}

Alright, removed the class from all but the first item and added the CSS, but now the shopping bag icon moved to the left :/