• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Logo & Menu Overlapping

d2r8

New member
#1
1608148012832.png


Hi I need to solve this overlapping issue. The menu doesn't appear to have any spatial awareness. In the free version I have tried entering header script to increase the padding to hold the menu further right, however while this works in fire fox inspect, when I apply it in the site customization it sends the whole page to the right. Note I have no knowledge of script / code writing other than that I have figured out trying to resolve this issue. There are some settings options, font size and padding but these don't do the job.

So I have paid for the pro version expecting greater customization of the menu. There doesn't appear to be any and to make matters worse as above I have an extra page title "site engineering" which should not appear on the left.

I would like the menu to be right justified split into 2 rows as standard, cascading to 3+ as necessary as the screen width decreases until the mobile menu icon appears.

Reading forums this appears to be a common problem but a fairly obvious minimal requirement. Apologies in advance if this is my layman knowledge.
 

d2r8

New member
#2
So I can increase the top margin of the menu and increase the padding from the right but not the left, so by my reckoning I just need a menu padding from the left slider up to say 500 px and the rows should sort them selves.
 

Denis

Support
Staff member
Admin
#4
Hi @d2r8 ,
thanks for getting the Pro version.
Ok I understand your problem.
You could solve it like this:
  1. Customizer
  2. Additional CSS
  3. Add this code
CSS:
.willer-position-menu{
    margin-left: 5em;// Here you can set the width you want
}
4.Publish

Let me know if you resolve, I remain available.

Regards

Denis
 

d2r8

New member
#6
Yes I got rid of the extra page title. I have no idea what breadcrumbs refer to but it worked.

CSS code, So I was barking up the right tree but pissing in the wind, I did try using that line .willer-position-menu.. but with style=padding left = .XXpx

OK, it is now working the best that it has done. The menu does not overlap the logo and the buttons cascade accordingly. I'd say this shot is from around a 14 inch monitor squash much further and it drops into the mobile menu. Great!

1608156430248.png


One slight new issue is the search bar, though I kinda like it I doubt this would ever be used. If it could be disabled (I have not found a switch) or moved up onto its own line?



1608156811258.png

I can't see the text when I type within it either though I have set the colour to blue.


1608157737765.png

Thanks for your help.
 

Denis

Support
Staff member
Admin
#7
Hi, glad you solved for the logo.
As for the Search input color you need to add this code in
Customizer-> Additional CSS

CSS:
input#search-box.search-box{
    color:#000!important;// Here you can enter the color you want.
}
If you want to hide the search input instead you need to add this code:

CSS:
.willer-search-container{
    visibility:hidden;
}
In these days, a Willer Pro update will be released that will fix all these bugs, and we will also add the ability to add space to the left of the menu directly from the Customizer, we will also fix other bugs.

Regards

Denis
 

d2r8

New member
#8
Hi cheers, I turned off the search bar which helps the menu stacking. Happy with that.

One more then I'll be quiet for months.

For Mobile Only

Is there a way to stop my logo drop down when scrolling downward i.e. keep it at the top. Its too big and takes over most of the screen.

1608209890927.png

Thanks
 

Denis

Support
Staff member
Admin
#9
Hi,
You could solve it like this:
add this code in Additional CSS

CSS:
@media (max-width: 768px) {
.willer-logo-header img{
    width:100px; //Here you can set the size you want to have on mobile devices only
}
}
Because if you don't let it go down then the menu won't go down either.

Otherwise you have to remove the javascript function that makes it go down only in mobile devices, but it is more complex because I would have to modify a template, and when you receive the updates then you would lose the modification.

I remain available

Regards

Denis
 
#10
That will do for me, cheers Denis.

Below is feedback from one of my best clients.

"Website looks good – nice and straightforward to navigate, looks professional without being over the top."