Secondary Menu Mobile Customization

[Sankalan]

Hi,

I use the following CSS Code to define the breakpoint for the secondary menu:

@media (max-width: 800px) {
.secondary-navigation .menu-toggle {
display: block;
}

.secondary-navigation ul,
.secondary-navigation:not(.toggled) .main-nav > ul {
display: none;
}
}

Of course, I found it here in this forum.
But now I want the hamburger menu icon and the mobile menu label to be right-aligned. How do I do that?

This is what I mean: https://prnt.sc/1022jx9

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sankalan]

Yes, sure.

It is a staging site

To get access to the site, you will need a username and a password.

Then to login to the dashboard, you will need another set.

Who am I telling all these. You already know I guess.

The information is provided below:

[Leo]

Edit this CSS:

.secondary-navigation .menu-toggle {
    display: block;
}

To to this:

.secondary-navigation .menu-toggle {
    display: block;
    text-align: right;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sankalan]

Alright, that worked, but in the tablet mode, the label goes to right and the menu goes to the left.

This is what I mean: https://prnt.sc/102bsfp

I will like it to be like the main menu: https://prnt.sc/102btwu

Is that possible?

[Leo]

Try this as well:

@media (max-width: 1366px) {
    .secondary-navigation .inside-navigation {
        flex-direction: column;
    }
    .secondary-navigation .inside-navigation .main-nav {
        width: 100%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sankalan]

Hey Leo,

Adding the code center-aligns it once again.

https://prnt.sc/102n30v

[Leo]

Sorry did you remove the secondary navigation?

Just checked the site and no longer see it.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sankalan]

Hi Leo,

Yes, I have removed the secondary navigation, because certain elements were not working as intended. A plugin was slowing down my site, and I had to get rid of it. I am trying to simplify the site as much as possible.

I am looking for better alternatives that won’t slow down my site. I will bring back the secondary menu only when I find viable alternative plugins.

Just wanted to ask you people (despite knowing that you are in no way responsible for answering this question) – do you know any good and simple plugin for quiz that won’t cause slowdowns or CLS issues? And, if I try to get a custom plugin made to work perfectly with GeneratePress, how much would it cost?

All the quiz plugins I have tried are horrible.

Thanks and Regards,
Sankalan

[Leo]

Just wanted to ask you people (despite knowing that you are in no way responsible for answering this question) – do you know any good and simple plugin for quiz that won’t cause slowdowns or CLS issues?

Unfortunately I don’t have any ideas at all.

And, if I try to get a custom plugin made to work perfectly with GeneratePress, how much would it cost?

Sorry I don’t have any ideas on this either. I would say try posting your request on https://codeable.io/ and see if anyone responds with a quote.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sankalan]

Thanks, Leo.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts