[Resolved] Weird header appareance in width 1024px

[Fernando Díaz Gascón]

Hi Tom,

I have check in a test site I am preparing a weird effect in the header and I check the GP demo, and the effect is the same, so the demo can be an example.

The effect I see is that the menu goes above the logo, for determined screen widths (from 768px to 1080px in the demo. It depends on the width of menu and logo). In my opinion, this does not look good and I would like to change it for my web.

The fast solution I find is to get appear the toggle menu for mobile devices from 1080px and not from 768px, as it is by default. How can I make appear the toggle menu for a specified widht?

The best solution would be to get appear the toggle menu for mobile devices from a width determined for the lenght of logo and menu, avoiding the effect I commented. Is it feasible? There is another solution?

Thanks in advance

[Tom]

Hi there,

You can choose when to initiate the mobile menu with this code: https://gist.github.com/generatepress/c23aef2d05807c39bb32

Simply change the 768px to your necessary width, and you should be good to go.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fernando Díaz Gascón]

Great!

I only see that from the width I write, to 768px, the logo keeps aligned left, and the mobile menu centered, what looks strange. I add this code to your code to fix this issue:

.fluid-header .inside-header {
    text-align: center;
}

If you consider my code does not have side effects, the topic is resolved.

Thank you!!

[Tom]

Looks good to me!

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fernando Díaz Gascón]

I have found some side effect of this change, this is because I changed this issue as still not resolved.

If I install the secondary navigation addon and I configure it as navigation layout “Fluid/full width”, “float right” navigation position and “right” navigation allignment, the next thing happens:

– From 768px till the width configured in the code you gave me, the secondary menu shows their items, even when the toggle is not pressed. Some modification to fix it?

Thank you.

[Tom]

Hi there,

Answered this for you here: https://generatepress.com/forums/topic/secondary-navigation-items-position/#post-167189

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fernando Díaz Gascón]

No, it is not the same solution. If you see this topic, you gave me a code (https://gist.github.com/generatepress/c23aef2d05807c39bb32) to get appear the toggle menu for a specified width. But with the secondary menu the problem with that code is that the elements are showed even when the toggle is not pressed.

In my web, the problem is showed between 768 to 850px. You can check narrowing the window in my web, or you can see a screen shot of the problem: http://econactiva.es.mialias.net/wp-content/uploads/2016/01/screen-shot-secondary-menu-problem.png

I hope the issue is more clear. Thank you in advance.

http://econactiva.es.mialias.net/
user: econac289
pass: q7lLHdjD

[Tom]

Ah I see, here you go:

@media (max-width: 850px) {
    .secondary-navigation ul {
        display: none;
    }
    .secondary-navigation.toggled ul.secondary-menu {
        display: block;
    }
}

• This reply was modified 7 years, 2 months ago by Tom.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fernando Díaz Gascón]

But with that code, I dont see the elements of the secondary menu when I press the toggle! I want to see them only when I press the toggle, as it happens from 768px and down.

Thanks in advance.

[Tom]

Try the edited code above 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Fernando Díaz Gascón]

Thats it! Great Tom, thanks a lot.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts