Viewing How to format the hamburger menu so that it's vertically centered on my header and drop menu isn't hiding my logo?
How to format the hamburger menu so that it's vertically centered on my header and drop menu isn't hiding my logo?
|
User: Guy D. 3 years ago
|
|
|
I'm designing my responsive website and I've been struggling with one thing for a couple of hours regarding the hamburger menu. I'll explain by showing the one on the EverWeb website. The hamburger on the right side of the EverWeb site is vertically centered on the header part. Also, when you click on it, the drop menu doesn't appear on top of the bottom part of the header, it appears at the bottom. I would like to know what settings I am supposed to be looking for to do this. I include 2 images to show what I'm trying to do. Thank you |
|
 Screen_Shot_2020-12-30_at_8_59_04_PM.png What I try to do  Screen_Shot_2020-12-30_at_8_59_55_PM.png Where I'm stuck |
|
|
User: EverWeb Support 3 years ago
|
|
|
Hi Guy, Thanks for reaching out. Please select the navigation menu widget and add your logo in the Logo Settings (at the very botton of the widget settings). Hope this helps. Best Regads, Alex ------------------------------- EverWeb Customer Support Submit Tickets or Learn More |
|
|
User: Guy D. 3 years ago
|
|
|
Hi Alex, Thanks for the quick answer. It did fix my problem with the vertically centered hamburger, but it introduces 2 new problems for me. My logo is 200x85px and I want it to be flush on the upper left side of the screen. It is not a .PNG with transparency as I want it to have a white background while the rest of the header will be violet. Also, my logo file is 400x170px but I shrink it to half of that in Everweb as I find it gives a sharper image than exporting it directly to 200x85px. When I put the logo in the options like you said, I don't have the option to shrink it down so I had to export another version at 200x85px directly. No big deal. So, what I do is that I put the normal logo on the left side of the screen (the one with double the resolution and shrank) and it works ok. I uncheck the "Appears on mobile and tablet" option for that logo so that it diseappears when the screen is shrunk to less than 768px wide. I put the second logo I made (the real 200x85px) in the options like to you said. It seems to do the trick and now the hamburger appears vertically centered. But it introduces 3 problems : 1. A thin line on the top of the logo where I can see the violet background 2. A thin line at the left of the logo where I can see the violet background 3. Now, the menu appears lower when the hamburger is on, but it doesn't appear flush with my header bottom. See the images for a visual explanation. Before triggering the hamburger https://i.imgur.com/A6kb14z.png After triggering the hamburger (with the 3 problems) https://i.imgur.com/fhrCvyY.png Thank you very much for the help. Last edit 3 years ago |
|
| Post Reply |
| You must login or signup to post. |