increase size of logo and burger icon on mobile view - Support

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
August 15, 2025 at 12:44 am #1488085

bemodesign
Participant

Can you get me CSS code for this? Mobile view, the logo is tiny.

Thanks!

GLP-1 Weight Loss Plans

August 15, 2025 at 1:44 pm #1488100

Mike
Moderator

Hey bemodesign,
It seems to be the same height as the header for mobile, do you want the header larger?
See the screenshot below.

Best regards,
Mike

August 15, 2025 at 8:14 pm #1488114

bemodesign
Participant

Can you get me code to make the Logo larger on mobile view, and also the burger icon? everything i try enlarges the logo, but then the Burger icon is not centered or small. thanks

August 15, 2025 at 9:04 pm #1488115

Mike
Moderator

Hi,
Do you want the logo to break out of the header? Right now it is within the header and the Burger icon is centered.
See the screenshot below.

Best regards,
Mike

August 15, 2025 at 9:15 pm #1488117

bemodesign
Participant

I was just thinking to increase both, with a larger header.

What would it look like if the logo “breaks out”?

August 18, 2025 at 3:37 am #1488161
Ismael
Moderator
Hi,

Thank you for the update.

Did you add this css code? This causes layout issues on mobile view, specifically on pages with transparent headers.
```
.responsive #top #main {
    padding-top: 80px !important;
}

.responsive #top #wrap_all #header {
    position: fixed !important;
}
```
Please remove the code, then add this css to adjust the size of the logo on mobile view:
```
@media only screen and (max-width: 1024px) {

  /* Add your Mobile Styles here */
  .responsive .logo img,
  .responsive .logo svg {
    max-height: 120px;
  }

  .responsive #top #wrap_all .main_menu {
    height: 120px;
  }

  .responsive #top #header_main>.container .main_menu .av-main-nav>li>a,
  .responsive #top #wrap_all .av-logo-container {
    height: 120px;
    line-height: 120px;
  }

  .responsive #top #main {
    padding-top: 0 !important;
  }
}
```
Best regards,
Ismael
August 18, 2025 at 8:35 pm #1488209

bemodesign
Participant

Perfect! Now I just need the header to be sticky on mobile view.

August 19, 2025 at 3:03 am #1488216
Ismael
Moderator
Hi,

You can make the header fixed, but it’s not recommended on mobile view. If you still want to proceed, include the following css code in the css media query:
```
.responsive #top #wrap_all #header {
    position: fixed !important;
}
```
Best regards,
Ismael
August 19, 2025 at 6:14 am #1488227

bemodesign
Participant

but now the pages that don’t have transparent backgrounds are up in the logo. Can you help adjust on mobile so I can move that down?

CONTACT US

August 19, 2025 at 7:14 am #1488231
Guenni007
Participant
on #main you set the padding-top to zero for all headers – so add that rule in your media query setting
```
@media only screen and (max-width:1024px) {
  .responsive .logo img,
  .responsive .logo svg {
    max-height:120px
  }
  .responsive #top #wrap_all .main_menu {
    height:120px
  }
  .responsive #top #header_main>.container .main_menu .av-main-nav>li>a,
  .responsive #top #wrap_all .av-logo-container {
    height:120px;
    line-height:120px
  }
  .responsive.html_header_transparency #top #main {
    padding-top: 0 !important
  }
  .responsive:not(.html_header_transparency) #top #main {
    padding-top: 120px !important
  }
}
```
August 19, 2025 at 7:21 am #1488232
Guenni007
Participant
but for your trials to have sticky header on mobile – my advice is to erases the code and replace it with ( It is difficult to identify the issue with the existing code. Therefore, I would prefer to start over.) :
```
@media only screen and (max-width: 1023px) {
    #header {
        position: fixed !important;
        height: 120px !important;
        max-height: 120px !important;
    }

    #top #header.av_header_transparency #header_meta {
        background-color: transparent;
    }

    #header_main {
        border-bottom: none;
    }

    #header:not(.av_header_transparency) #header_main {
        box-shadow: 0 5px 5px rgba(182,182,182,0.75);
    }

    .responsive #top .av-logo-container ,
    .responsive #top .logo a,
    .responsive #top .logo img,
    .responsive #top .logo svg {
        height: 120px !important;
        max-height: 120px !important;
        line-height: 120px !important;
    }

    .responsive #top .av-main-nav .menu-item-avia-special a {
        height: 120px !important;
        line-height: 120px !important;
    }  

    .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
        background-color: transparent !important;
    }

    #top .header_bg {
        background-color: transparent !important;
    }

    #top #header:not(.av_header_transparency) .header_bg {
        background-color: #FFF !important;
    }

    .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
    .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
    }

    .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
    .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
    }

    /*** das hier individuell anpassen je nach dem  ***/
    #top #header.av_header_transparency #header_meta .phone-info * {
        color: #FFF !important;
    }

    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
        background-color: #FFF;
    }
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
        color: #FFF;
    }
    .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
        padding-top: 120px !important;
    }
    .responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet  #top #main {
        padding-top: 0 !important;
    }
}
```
and next: synchronise the switch point of your burger menu with those settings for your header.
means
```
@media only screen and (max-width:1023px) {
  #avia-menu .menu-item {
    display:none
  }
  .av-burger-menu-main.menu-item-avia-special {
    display:block
  }
}
```
for your content inside the first section there should be more distance to header on smaller screens! …
in addition :
```
@media only screen and (max-width:767px) {
  .responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet  #top #main #av_section_1 .content {
    padding-top: 150px
  }
}
```
August 19, 2025 at 8:43 pm #1488269
bemodesign
Participant
I think I got it. You are awesome. Please check to see if correct :

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-caption-title
{text-shadow: 1px 1px 1px #717070;}

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
#top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – ALL H1 headlines: */
.av-special-heading h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
.av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – subheading text: */
#top .av-subheading p {
text-shadow: 1px 1px #717070;
}

#header_meta a, #header_meta span {
font-size:16px !important;
}

.phone-info {
font-size: 18px;
}

@media only screen and (max-width: 1023px) {
#header {
position: fixed !important;
height: 120px !important;
max-height: 120px !important;
}

#top #header.av_header_transparency #header_meta {
background-color: transparent;
}

#header_main {
border-bottom: none;
}

#header:not(.av_header_transparency) #header_main {
box-shadow: 0 5px 5px rgba(182,182,182,0.75);
}

.responsive #top .av-logo-container ,
.responsive #top .logo a,
.responsive #top .logo img,
.responsive #top .logo svg {
height: 120px !important;
max-height: 120px !important;
line-height: 120px !important;
}

.responsive #top .av-main-nav .menu-item-avia-special a {
height: 120px !important;
line-height: 120px !important;
}

.responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
background-color: transparent !important;
}

#top .header_bg {
background-color: transparent !important;
}

#top #header:not(.av_header_transparency) .header_bg {
background-color: #FFF !important;
}

.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate,
.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
display: block !important;
}

.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img,
.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
opacity: 0;
}

/*** das hier individuell anpassen je nach dem ***/
#top #header.av_header_transparency #header_meta .phone-info * {
color: #FFF !important;
}

.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after {
background-color: #FFF;
}
.html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before {
color: #FFF;
}
.responsive.html_header_top.html_mobile_menu_tablet #top #main {
padding-top: 120px !important;
}
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main {
padding-top: 0 !important;
}
}

@media only screen and (max-width:1023px) {
#avia-menu .menu-item {
display:none
}
.av-burger-menu-main.menu-item-avia-special {
display:block
}
}

@media only screen and (max-width:767px) {
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main #av_section_1 .content {
padding-top: 150px
}
}
- This reply was modified 2 weeks, 2 days ago by bemodesign.
August 20, 2025 at 7:48 am #1488285

Guenni007
Participant

All seems to work now!
but please: https://kriesi.at/support/topic/use-code-tag-for-posting-snippets-e-g-implementing-google-tag-script/

to check your code it would be easier if you use the code tag here on the board.
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.