-
Posts
-
Hi,
to get the mobile burger menu along with the header logo sticky, I used the following script from Vinay
(I replaced the background color with a background photo):@media only screen and (max-width: 767px) {
.av-logo-container {
position: fixed;
top:0!important;
background-image: url(“https://…jpg”);
/*background: #f66f00;*/
right:0;
left:0;
z-index:999999!important;
}.avia-fullwidth-slider.avia-builder-el-0 {
border-top: none;
position: fixed;
top: 50px;
z-index: 99;
}
}How can I arrange the background image to be full with? At the moment it is flush with the text.
My second problem here is that after refreshing the page, the small bar above the main menu obscures the burger menu, so that the logo is no longer visible. And the little bar has changed its color. On the desktop display, the bar is green with white text, but white in the mobile view, so that the information can not be seen.
Can you give me some advice on how to change that?
The page address can be found in the private contet field below.Best regards
GrobiHey Grobi,
Thank you for the inquiry.
You should apply the style to the main header container instead of the logo container. Try to replace the css with the following code.
#header_main { position: fixed; top: 0; right: 0; left: 0; z-index: 1000!important; background-image: url("https://einklang-heilpraxis.de/wp-content/uploads/2019/10/wald.jpg"); background-size: cover; }Please don’t forget to remove the previous css, and toggle the Performance > File Compression settings.
Best regards,
IsmaelHi Ismael,
I am sorry for the delay.It does not work. The mobile menue did not cheange and looks like before.
I removed the previous css-script from the quick-css-area and replaced it with your script.
I hope you meant this to do.Than I looked for the file compression in enfold performance. To be honest, I do not know what to toggle there.
Unfortunately I have not enough experiance with this and hope you can give me a further hint.Best regards
GrobiHi Grobi,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi,
Thank you for the update.
The css modification is disabled when we check the site. Did you disable it?
This is how the header looks when the css modification is enabled.
// https://imgur.com/a/03z9Z90
Is that how you want the header to look like?
Best regards,
IsmaelHi Ismael,
yes, thanks, the Menue in the mobile view now is exactly how I wanted it!
But – the menu in the desk top view now is displayed wrong, as you can see here:
// https://imgur.com/a/VtFVNGAYour question: to be honest, I do not know what exactly you mean with “css modification is disabled”.
Do you mean settings on the enfold layout-builder-page?Best regards
Grobiwith that background-image it is hard to recognize that there is a hamburger to click.
And i would not show the advanced layerslider on responsive case ( mobile, small screens )maybe you style the colors a bit and make the line-height of the burger not shrink with the script:
.header_color .av-hamburger:not(.is-active) .av-hamburger-inner, .header_color .av-hamburger:not(.is-active) .av-hamburger-inner::before, .header_color .av-hamburger:not(.is-active) .av-hamburger-inner::after { background-color: #f4f1cb; -webkit-filter: drop-shadow(1px 1px 3px #000); filter: drop-shadow(1px 1px 3px #000); } .responsive #top #header_main > .container .main_menu .av-main-nav > li > a { line-height:82px !important; }Hi Günni007,
thanks for your advices.
Indeed the burger is not displayed very clear, this must be better in the end.
But the design tuning i will arrange, when the menue works in principle.Thanks also for the script.
Best regards
GrobiHi Grobi,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
as you can see above, my problem is not solved yet.
Although the mobile menu is cool now since using Ismaels script, it is no longer the desktop menu.
As you can see on my screenshot above (// https://imgur.com/a/VtFVNGA ) the desktop menue is almost complete hidden, the used layer slider as well.When I comment out the script in the quick css-field, than the desktop-display is OK again. As you can imagin, I hope, that I can get both versions in a correct view.
Are you able to help me?Best regards
GrobiBut you already know that you probably chose the option : “Header is invisible and appears once the users scrolls down”?
And what do you mean by “When I comment out the script in the quick css-field, than the desktop-display is OK again.”
Quick CSS Input is not at all a place for a script.Hi Grobi,
Of course, you can have the background on the mobile screens only, you need to use media queries to make the code more specific. You need to use the code like this:
@media only screen and (max-width: 989px) { #header_main { position: fixed; top: 0; right: 0; left: 0; z-index: 1000!important; background-image: url("https://einklang-heilpraxis.de/wp-content/uploads/2019/10/wald.jpg"); background-size: cover; } }Best regards,
VictoriaHi Victoria and Ismael,
thank you very very much for your effort and patience with me.
Everything is great now !!!
Have a nice advent season
Best regards
GrobiHi Grobi,
Great, I’m glad that Victoria and Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
- The topic ‘Darstellung des Sticky Mobile Burgers verändern’ is closed to new replies.