Responsive Settings in Mobile and Tablet

Hey lbeneby,

The 70px padding added to the html should be added for the big screens only. Like this:

@media only screen and (min-width:1024px){
    html, #scroll-top-link {
        padding: 70px;
    }
}

If you need further assistance please let us know.
Best regards,
Victoria

Hi lbeneby,

Can you try adding this CSS code as well, it won’t be exactly the same especially with the position of the menu and logo, but it should look a lot better:

@media only screen and (max-width:980px) {
  html.html_boxed {
    padding: 0;
  }

  #top #header .av-logo-container {
    width: 100% !important;
  }

  .responsive #top #header #header_main .inner-container .widget {
    width: 50%;
  }
}

@media only screen and (max-width:479px) {
  .responsive #top #header #header_main .inner-container .widget .avia-button {
    display: block;
    margin-left: 0 !important;
    padding: 12px !important;
    width: 100% !important;
  }

  .responsive #top #header #header_main .inner-container .widget br {
    display: none;
  }
}

Best regards,
Nikko

Hi lbeneby,

It’s possible however it doesn’t look good because of the length of the text: Explore our Services (this would show as 2 lines) while Client Login remains at 1 line.

Best regards,
Nikko

Hi lbeneby,

Please replace this code that I gave:

@media only screen and (max-width:479px) {
  .responsive #top #header #header_main .inner-container .widget .avia-button {
    display: block;
    margin-left: 0 !important;
    padding: 12px !important;
    width: 100% !important;
  }

  .responsive #top #header #header_main .inner-container .widget br {
    display: none;
  }
}

with:

@media only screen and (max-width:479px) {
  .responsive #top #header #header_main .inner-container .widget .avia-button {
    display: inline-block;
    margin-left: 0 !important;
    padding: 12px !important;
    width: 100% !important;
  }

  .responsive #top #header #header_main .inner-container .widget .avia-buttonrow-wrap > .avia-button:first-child {
    width: 59% !important;
  }

  .responsive #top #header #header_main .inner-container .widget .avia-buttonrow-wrap > .avia-button:nth-child(2) {
    width: 39% !important;
  }

  .responsive #top #header #header_main .inner-container .widget br {
    display: none;
  }
}

Best regards,
Nikko

Hi lbeneby,

You can take advantage of adding widget to the header: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
Hope it helps :)

Best regards,
Nikko

Hi lbeneby,

Please don’t use inline CSS as it’s not a good practice and also bad for responsive versions.
You can use CSS Classes instead and just define the CSS code in Quick CSS.
You can hide the header widget via CSS and not remove it, so we can inspect it and then try to give you CSS code that should properly place it.

Best regards,
Nikko

Hi lbeneby,

That’s great, as for the burger menu, please use this CSS code:

.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, 
.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, 
.html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: black;
}

Best regards,
Nikko

Hi lbeneby,

Please add this CSS code:

#top #header .avia-menu.av-main-nav-wrap {
    width: 100%;
}

#top #header .av-main-nav {
    align-items: stretch;
    justify-content: space-evenly;
}

#top #header .av-main-nav > li {
    width: 100%;
    border-right: 1px solid white;
    text-align: center;
}

#top #header .av-main-nav > li > a .avia-menu-text {
    border: none;
}

As for enlarging the logo, I believe you have already done so :)

Best regards,
Nikko