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

[Andrew]

I just exported a black version of the logo in an SVG format in Photoshop…

Would that work?

[David]

You may find its still only a JPEG / PNG wrapped inside an SVG

[Andrew]

Hello David,

I am struggling to get an SVG done for this.

Is there no other way around this?

Would really appreciate your help/input as i am totally stuck 🙁

Happy to give you access to the site in question

[Andrew]

https://www.loom.com/share/b0895cd7f5f748e79e9a544dac081413

[David]

Right so lets try filters – not sure if it will be compatible on all browsers but….

1. Remove this CSS so the search isn’t getting in the way:

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

2. Add this CSS:

@media (min-width: 1024px) {
    .main-navigation:hover .navigation-logo img {
        -webkit-filter: invert(1);
       filter: invert(1);
        transition: 0.2s ease-in;
    }
    .main-navigation:hover {
        background-color: #ffffff;
        transition: 0.2s ease-in;    
    }
    
    .main-navigation:hover ul li a {
        color: #000000 !important;
        transition: 0.2s ease-in;    
    }
    
    #sticky-navigation .navigation-logo img {
        -webkit-filter: invert(1);
       filter: invert(1);
    }
}

[Andrew]

You beautiful man! It worked! Thanks 🙂

The only problem now is the search is over on the right. http://prntscr.com/npgv1e

[David]

Never been called that before 🙂

Try this CSS:

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

[Andrew]

Haha! That seems to have done the trick! Many thanks for your assistance David! All the best for the coming weekend!

[David]

Awesome – glad to be of help

[Andrew]

Hi David,
Just noticed something. The page which is active is blacked out…

Any ideas?

http://prntscr.com/nptop4

[David]

You need to change the current background color in Customizer > Colors > Primary Navigation

[Andrew]

How do I fix the menu on mobile? Any idea?

https://www.nicemedia.co.uk

[David]

Edited the CSS here so it only applies to Desktop

[Andrew]

This video may make it clearer. It does the same on both mobile and tablet

https://www.loom.com/share/583c17572eef4b96a1fe1c0b6c86e553

Thanks David.

[David]

See my reply above 🙂

[Author]

Posts