[Resolved] How to get a menu where the menu is right next to the logo on the left hand side

[Andrew]

How can I make it so the menu is right next to the menu on the left hand side?

http://prntscr.com/n2nhih

[David]

Hi there,

you can use the navigation as a header:

https://docs.generatepress.com/article/navigation-as-a-header/

Then you can set the Primary Navigation to align left.

[Andrew]

Brilliant. It works. Thank you. The problem I have now is the search button it all the way on the right of the screen

http://prntscr.com/n2q5sm

[David]

Try this CSS:

.main-navigation li.search-item {
    float: left !important;
}

[Andrew]

Cheers, that worked David, however now when I hover over the menu everything goes black…

http://prntscr.com/n31ec4

[David]

Can you provide a link to the site so i can take a look? You can edit your original topic and use the Site URL field for privacy.

[Andrew]

It’s on a test site at the min.

I made a video though…

https://www.useloom.com/share/50a9390d4d3c471a9951a044aba4bd52

[David]

Sorry my bad, gave you the wrong float – so edited the code above.
Hmmm… nice effect created by a bad code lol – its doable but not simple. So effectively make it a negative effect ?

Trying to think how we would invert the logo… hmmm

[Andrew]

Hi David,

I got lost with replies to this.

Any thoughts on how to accomplish this? To make the logo appear a different colour on hover? Also, the menu background goes white on hover but the text is also white so appears blank.

Any help would be greatly appreciated 🙂

[David]

The menu color swap wouldn’t be too difficult, changing the logo color will be trickier. The solution for that would be to use an SVG:

https://docs.generatepress.com/article/adding-svg-logo/

We can then swap the fill color ( maybe ).

Is that doable? Then we can look at the CSS required. Would need a link to the site.

[Andrew]

Let me look into that David.

Again, thanks for being so responsive!

[David]

You’re welcome – let us know when you’re ready.

[Andrew]

Hi David,

Sorry, i have been mad busy and haven’t had a lot of time. There is no SVG logo – can I generate one from a jpeg or png using an online converter of some kind? (I have never done this before).

With thanks,

Andrew

[David]

You can do conversion from JPEG/PNG to SVG but unless you have a really high res logo and pay for a good service the results can be rather poor. They are best created using a package like Adobe Illustrator or Affinity Designer……

[Andrew]

I will ask the owner of the company if they can have an SVG created. Maybe their original logo designer can get one for them.

Again, I appreciate your assistance with this!

(how do I add log in details on this post for you to access the site in question?)

Thanks David!

[Author]

Posts