-
Posts
-
Hi Mike
Thank you for that.
Unfortunately, the search icon pushes the burger menu on top of the logo/
https://img.savvyify.com/images/2024/08/18/Screenshot-2024-08-18-115106.pngDo you have any solution for the other 2 questions?
Thank you
ReutHi,
Odd, I’m not seeing that on my desktop when the css is added:
please use this screen resolution link to tell us when you see it.
Also ensure that you cleared your cache.Best regards,
MikeHi Mike,
1. I saw the search icon on the burger menu on all kinds of different screen sizes and resolutions, and after a few cache purges and a few days.
For your question – mine is 1536 x 864And I’m rewriting the other 2 questions I have:
2. Regarding the burger menu:
When the menu is closed, I would like for the container background to be – #8c8c8c and the burger menu itself to be #ffffff
and when the menu is open the container background should be #ffffff and the – X should be #8c8c8c.
so I used the code you gave me and I added padding on the left and right and didn’t use this code=line: line-height: 40px;
but the pudding does not fit into the container no matter what I tried it either too small on the right or it’s too big on the left –
https://img.savvyify.com/image/Screenshot-2024-08-13-010003.9rZ05
https://img.savvyify.com/image/Screenshot-2024-08-13-005948.9rpaf3. I would like the menu links inside the burger menu to be in this color – #92B743. I’ve tried changing it in advanced styling, but nothing has changed on the desktop and mobile views.
Thank you so much for all the help
Reut
Hi,
#2 The custom menu bar is 100px wide:
but the flyout menu is 300px, but the burger menu is still only 100px:
The flyout overlay is white and you can not make the burg1 menu area only a gray color.
So if you want a gray burger menu when the menu is closed try this css:.toolbar-content#content1 { width: 100%; height: 100px; background-color: #8c8c8c; } html:not(.av-burger-overlay-active) #top .av-burger-overlay li li .avia-bullet, html:not(.av-burger-overlay-active) #top .av-hamburger-inner,html:not(.av-burger-overlay-active) #top .av-hamburger-inner::before,html:not(.av-burger-overlay-active) #top .av-hamburger-inner::after { background-color: #fff !important; }
but when it is open it will look like this:
It is probably best to not change this.Best regards,
MikeHi Mike.
Thank you that worked.
Do you have any updates about the other 2?
1. How can I change the menu links inside the burger menu to this color – #92B743?
2. The search option that doesn’t show on the desktop?
Thank you
ReutHi,
To change the menu links inside the burger menu to green, try this css:#av-burger-menu-ul a { color: #92B743; }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi!
Thank you so much, that worked.
These 2 last problems to fix
1. The search icon is not showing on the desktop.
I’m rewriting my answer regarding the resolution –
I saw the search icon on the burger menu on all kinds of different screen sizes and resolutions after a few cache purges and a few days.
For your question – mine is 1536 x 864
And can the icon be under the burger menu and not above it?2. The changes I made to the burger menu background color when it is closed and the menu item’s color are not showing on the mobile.
https://img.savvyify.com/image/WhatsApp-Image-2024-08-28-at-08.26.26.91w1d
https://img.savvyify.com/image/WhatsApp-Image-2024-08-28-at-08.26.25.91tJnThank you so so much for all your help
Reut RachelHi,
I added this css to show the search icon for you:#top #content1 .av-main-nav > li.menu-item#menu-item-search { display: block!important; } #top #content1 .av-main-nav > li.menu-item#menu-item-search a { color: #92B743; text-align: left; } #top #content1 .main_menu .menu li#menu-item-search { float:none; }please clear your browser cache and check.
Best regards,
MikeHi,
Thank you so much for all the help.
I cleared the cache on both the browser and the server.
Unfortunately, it didn’t work, now the menu is overlapping the logo.
https://img.savvyify.com/image/Screenshot-2024-08-28-182515.9QyRXAlso, is it possible for the search icon to be under the burger menu and not above it?
This is truly the last thing left, just for the search icon to show under the menu on the desktop
Thank you so much again for all the help/
Reut RachelHi,
When I check your site at 1536 x 864, that you wrote was your screen size, but I don’t see the menu over the logo:
To switch the two icons try this css.av-burger-menu-main.menu-item-avia-special { top: -120px; } #menu-item-search { top: 100px; }You can also adjust the values and perhaps keep the icons away from the logo
Best regards,
MikeHi,
Thank you so so so much!
That worked perfectly.
One last thing, differently – Now that the search icon has been added, the upper part of the sidebar seems a little crowded compared to the lower part. I want to move the logo to be centered on the sidebar’s height but keep the same px distance between the logo and the social icons.
How can I do it?Thank you so so much for all the help
ReutHi,
When I check it looks centered, perhaps try adjusting the numbers in the css above so the items are not so crowded, or move the logo with this css:#content2 .logo { top: 100px; }use either positive or negative numbers. Unfortunately now that the items are being moved around there is not a way to make them keep the same px distance between all, so try to adjust these numbers until you like what you see.
Best regards,
MikeHi Mike,
Thank you so much for all the help.That helped.
However, I have 3 things I need help with1. I’ve tried to move the social bookmarks a bit down, I used this code –
#content3 .social_bookmarks {
top: 200px;
}but it didn’t work
2. For some reason, the code you gave me to change the width of the open menu is not working anymore
3. On mobile, the search icon overlaps the body content, plus there is no menu.
https://img.savvyify.com/images/2024/09/07/WhatsApp-Image-2024-09-08-at-03.44.59.jpegThank you
ReutHi,
I did’t find the above css so I added this:#content3 .social_bookmarks { top: 100px; position: relative; }It looks like you may have removed the other css so I added it again:
.html_av-overlay-side .av-burger-overlay-scroll { width: 200px; }Best regards,
MikeHey Mike!
Thank you so much for everything
On the desktop, it looks perfect! thank you so so much for everything!
The only thing is, as I wrote, on screens smaller than 777 the search icon overlaps the body content, plus there is no menu at all.
How can I fix it?Reut
Hi,
I believe that I have sorted it out, please clear your browser cache and check.Best regards,
MikeHey!
Thank you, however, I saw the code you changed –
// Check if the screen width is larger than 777px
if (window.innerWidth < 320) {
return; // Exit the script if the screen width is less than 777px
}You’ve changed the 777 to 320
it didn’t solve the problem.
It just made the desktop header changes we made apply to mobile also.
But, on screens smaller than 777 the header needs to be a regular mobile header.
That’s why you’ve added this code in the first place.
and when I’m changing the 320 back to 777 the header is on top and just like a regular mobile header, but there is no menu at all and the search icon overlaps the site’s body.How can I pix this?
Thank you
reutHey!
Now it is a regular mobile header, and the search icon is in its place. But unfortunately, there is still no menu at all.
How can fix it?
Thank you so much for all the help all this time/
ReutHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Changes to right sidebar header’ is closed to new replies.