Archived topic
How to get a menu where the menu is right next to the logo on the left hand side
33 replies · Started by Andrew on March 25, 2019
I just exported a black version of the logo in an SVG format in Photoshop...
Would that work?
You may find its still only a JPEG / PNG wrapped inside an SVG
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
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);
}
}You beautiful man! It worked! Thanks :)
The only problem now is the search is over on the right. http://prntscr.com/npgv1e
Never been called that before :)
Try this CSS:
.main-navigation li.search-item {
float: left !important;
}Haha! That seems to have done the trick! Many thanks for your assistance David! All the best for the coming weekend!
Awesome - glad to be of help
Hi David,
Just noticed something. The page which is active is blacked out...
Any ideas?
You need to change the current background color in Customizer > Colors > Primary Navigation
How do I fix the menu on mobile? Any idea?
Edited the CSS here so it only applies to Desktop
This video may make it clearer. It does the same on both mobile and tablet
https://www.loom.com/share/583c17572eef4b96a1fe1c0b6c86e553
Thanks David.
See my reply above :)
