[Resolved] Troubles getting logo and menu right

[tsecher]

Hi there,

We have bought the GP Premium theme and are planning to use it with Elementor to power our future website. We have had a lot of problems with our current theme and we simply have to switch even though it is a rather painful process. Now I wonder if you could help us get a good start. It seems to be quite easy to work with Elementor but I haven’t figured out how to work with headers and footers yet. Also our header (which you will find at gomezzo.com) is a bit complex with both logo, double menus and search box. How do you suggest we go about creating thing on our new setup? We are thinking about buying the CSS-Hero plugin as well to help us customise things. Any best practice advice working with GP and Elementor? And do you think CSS-Hero is a good addon?

// Thomas

[Leo]

Hi there,

Are you looking to create the exact header?

It’s doable with some custom CSS.

Start by uploading a logo in Customizer > Site Identity

Then create two separate menu – primary and secondary: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/

Then play around with where you want them to be:
https://docs.generatepress.com/article/navigation-location/
https://docs.generatepress.com/article/secondary-navigation-location/

One thing I will mention is that currently you can only add navigation search in primary navigation, however all the other options are basically the same so you can switch them (make the one beside the logo secondary and the one on top primary)

If you want to float the logo across a couple sections, something like this should help:
https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/#post-246468

Menu next to logo: https://generatepress.com/forums/topic/menu-next-to-logo/#post-241435

I’m not familiar with CSS-Hero and I don’t think you will need it if you are using Elementor.

This site gives some good tutorial on using GP + Elementor: http://snifflevalve.com/

Feel free to join our Facebook group GeneratePressCommunity too – Lots of users on there are using the GP + Elementor combo and should be able to give you a lot of tips.

This should help get you started 🙂

[tsecher]

Thank you very much Leo. We got the logo in place but it seems to end up under the menu and not on top. Also when using that menu with elementor it seems to create some problems even though we have choosen full with. Any ideas what it can be?

Look at http://www.gomezzo.dk and http://www.gomezzo.dk/test/

[Tom]

Typically I would suggest flipping your menus, and uploading your logo as the navigation logo: https://docs.generatepress.com/article/navigation-logo/

However, that will prevent you from using the navigation search in the smaller, top menu (as Leo said).

Otherwise, you’ll need to move your secondary navigation to the right by 200px (the width of your logo):

.secondary-navigation .inside-navigation {
    padding-left: 200px;
}

[tsecher]

Thank you Tom. Any idea why the logo ends up under and not in top of the menu?

[Tom]

You’ll still need my CSS above so the links are to the right of the logo, but you can do this as well:

.main-navigation .sticky-logo {
    z-index: 99;
}

[tsecher]

Perfect – that did the trick. Now I am trying to figure out why I got a margin around the photo which should go all the way up and hit the border of the menu and all the way out to the left and right sides. I have setup the page to be full width, and I tried adjusting settings in the theme but perhaps the problem is in Elementor?

http://www.gomezzo.dk/test

[Tom]

Just adjust the 200px padding I mentioned above to something like 180.

As for the image below, you have the elementor section set to contained, so it’s not going full width.

[tsecher]

It seems to work now. Thank you so much and sorry for any stupid questions. I am a newbie with GP and Elementor and pretty much with CSS as well. I appreciate your support 🙂

[Tom]

Always happy to help! 🙂

[tsecher]

We have moved to gomezzo.com and now we seem to have a problem with the logo loading from the old gomezzo.dk – I have uploaded the logo again but still it continues to load from gomezzo.dk. Any ideas?

[Leo]

Have you tried reuploading and clearing WP Rocket cache?

[tsecher]

Yes I tried that but the site continues to point towards the old .dk domain

[tsecher]

I solved it. For some reason the logo didnt show under the first menu settings but when I uploaded the logo from the current media library everything became correct. Strange.

[Leo]

Glad you figured out!

[Author]

Posts