[Resolved] menu

[Jonathan]

Hello good day, please I need to place the menu in the middle vertically. Taking as reference the height of the logo.

Please see these images so that you can understand me better.

Currently it is displayed totally up this way:
https://www.dropbox.com/s/jfxkwgfjqhr3txv/Realidad.jpg?dl=0

I want to get your position in half vertically in this way:
https://www.dropbox.com/s/5z4h0alvpqbitoc/Expectativa.jpg?dl=0

I appreciate your help.

[Leo]

Hi there,

Try this method:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

[Jonathan]

Excuse me but I still do not solve my problem, what you indicate in your answer resuleve otherwise.

I want to get the menu in half vertically from the header, as shown in this image:

https://www.dropbox.com/s/5z4h0alvpqbitoc/Expectativa.jpg?dl=0

I appreciate your help.

[Leo]

My answer is actually a better way to achieve that layout.

If you want to use your current method, try this CSS:

@media (min-width: 769px) {
    .main-navigation {
        padding-top: 30px;
    }
}

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

[Jonathan]

This solution is not the best for it, since it affects the responsive design of the page.

Please help me with another alternative that perfectly fits the menu in the center vertically (middle) of the header.

As you can see in this image, thank you:

https://www.dropbox.com/s/5z4h0alvpqbitoc/Expectativa.jpg?dl=0

I appreciate your help.

[Leo]

Sorry. I had the wrong media query which only targets mobile.
I’ve edited the CSS so now it should only target desktop.
Please give it another shot. If this doesn’t work any chance you can link me to the page in question?

[Jonathan]

Ok thanks, it seems a good solution, can you tell me if it is totally responsive?, since at this moment I am working the page in local host and when I make the small window I notice some padding defects that are corrected to certain sizes.

Please look at those imagens:

Size full: (This is perfect) Excellent!
https://www.dropbox.com/s/zhslxk4pjxrencj/SNAG-0011.jpg?dl=0

Making small the window (This have some defects):
https://www.dropbox.com/s/b20qc8o88rrzae9/sizes%20%281%29.jpg?dl=0

Making so much the windows:
https://www.dropbox.com/s/w0euoi5aw7w9lbv/sizes%20%282%29.jpg?dl=0

Totalmente version mobile (This is perfect) Excellent:
https://www.dropbox.com/s/ynpzbe9qj1lz5xb/sizes%20%283%29.jpg?dl=0

I appreciate your comment.

[Jonathan]

Excuse me but I found other defects generated from the css that you gave me, the css adds to the sticky menu that padding which I do not want.

Please help me with another alternative through which I can align the menu vertically in the middle.

Here I leave the following preview:

https://www.dropbox.com/s/gc69cuvjjdf09pt/SNAG-0012.jpg?dl=0

I appreciate your help.

[Leo]

Can you link me to the site in question?

As you can see that it’s a bit hard for us to provide custom CSS code without seeing it.

If you edit the original topic then there is a private URL field you can use so that only our staff can see it.

I would appreciate it.

[Jonathan]

At this moment the page is in construction and I am driving in a local server, therefore it will be impossible to provide an access link.

I do not have any loaded css, since at this moment I am only working on the header.

What I have done is simply installed the theme, I install the generatepress plugin, I have loaded the logo, I want the menu which is aligned to the upper right (float-right) is aligned in the center vertically (middle), as you can see in the following image:

https://www.dropbox.com/s/l3cazkbx18z7val/header.jpg?dl=0

please I appreciate the understanding and help you can give me.

[Leo]

Try this to exclude sticky navigation:

@media (min-width: 769px) {
    .main-navigation:not(.navigation-stick) {
        padding-top: 30px;
    }
}

[Jonathan]

That CSS is a excelent solutions, I hope not to have problems in the future.

Thank you so much.

Keep in that way

Thank you very much for the help.

I appreciate the attention and patience.

[Leo]

No problem!

[Author]

Posts