Archived topic

Slideout Site Questions

6 replies · Started by Mathias on October 29, 2018

Viewing posts 1–7 of 7

October 29, 2018 at 2:34 am #712855

Hi GP

1)
After deleting and adding some menus, the vertical menu is no longer vertical as you can see here: https://gyazo.com/1799da7b6b7097908d59f727ba341aae

How do I fix this? Also, it seemed like the vertical menu created linebreaks at each space in the menu label. Can I prevent this?

2)
How do I align the menu to the right for mobile? It doesn't changed anything when I do it in the layout settings.

3)
The same goes with the sticky navigation setting. Nothing happpens when I enable it for mobile.

Best,
Mathias

October 29, 2018 at 9:42 am #713255

Hi there,

1. Not quite sure if understand. The menu looks good to me currently?
https://www.screencast.com/t/96kCfs9JNe

Let me know if I'm missing something :)

2. What do you mean by that? Align menu item to the right of the slideout navigation? or align the toggle to the left?

3. It's using mobile header so make sure you turn the sticky mobile header on:
https://docs.generatepress.com/article/mobile-header/

Let me know :)

October 29, 2018 at 2:44 pm #713622

Hi Leo!

Thank you for your response.

1)
Sorry if I was unclear. I am talking about the menu "unslided". As you can see in the side library in the Slideout theme (I can't link to it, sorry), the menu is supposed to look like this with the vertical "Slideout" menu at the top and the social links in at the bottom. Whereas in my case they are all in the top and not vertical.

2)
I mean't the hamburger toggle. It is currently in the middle on mobile and the menu alignment setting does not change anything.

3)
I tried that, but it does not work. Nothing happens when I turn it on. The sticky menu is not appearing no matter what :)

October 29, 2018 at 7:13 pm #713773

1. Try adding rotate as a custom class for the menu item.

2. The toggle will be on the right by default if you are using a mobile header logo. If you don't want a logo, try this CSS:

#mobile-header .menu-toggle {
    text-align: right;
}

3. Weird. Is the sticky mobile header option turned on right now?

October 30, 2018 at 12:43 am #713912

1. Perfect! However, it looks like it is setup to make linebreaks at each space, as you can see at the site now. Is there a fix for that?

2. Also perfect! Can I make the slideout menu slide out from right on mobile?

3. Yes it is. It is set to sticky on mobile.

Thanks again Leo!

October 30, 2018 at 10:22 am #714618

1. I'll get back to you on this.

2. This should be an option: https://docs.generatepress.com/article/open-slideout-navigation-right/

3. Really weird. I don't see the sticky code showing up and we haven't had this problem reported before.
Doesnt' look like you have many plugins activated but can you go through #1 here to make sure there aren't any plugin conflicts?
https://docs.generatepress.com/article/debugging-tips/

Let me know :)

October 30, 2018 at 4:18 pm #714965

1. In your custom CSS (Customize > Additional CSS), replace:

#site-navigation .rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-bottom: auto;
}

With:

#site-navigation .rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-bottom: auto;
    white-space: nowrap;
}

3. Make sure the actual mobile header sticky option is set in "Customize > Header" (not the primary navigation sticky).

This archived topic is closed to new replies.

Start building better websites today.