Here is a screenshot of the top white space I need to remove and move the header and logo up.

https://img.savvyify.com/image/top-bar.9qiXB

Hi Mike,

Sorry for the missing information. It’s just because Ismael told me to open another thread.
We solved the initial issue, and I got mixed up with another topic. My bad ;)

I want to show the correct breadcrumb information: Home (https://shop.akhurst.com/) since the website’s home page is not http://www.akhurst.com/. We use a multisite platform, but we dont have this issue with the other parent companies (Cantek, Leadermac).

Ismael sent me this code:

function avia_breadcrumbs_trail_mod($trail)
{
if ( is_product() || is_product_category() ) {
$trail[1] = ‘Home‘;
}
return $trail;
}
add_filter(‘avia_breadcrumbs_trail’, ‘avia_breadcrumbs_trail_mod’, 50, 1);

I worked out how to do it myself by adding this to Quick CSS:

@media only screen and (max-width: 767px) {
.responsive #top .menu-item-27057 {
padding-top: 15px!important;
}
}

But the top bar is still too deep on a mobile so I still have the original problem where I am trying to achieve the design in the link above. In the mockup the orange banner is only twice as deep as it is on the live website (not more than three times as deep like it is now)

So I still need to remove the vertical space on the orange banner on mobile, so that it is less deep than the white banner containing the logo

So thank you for all your help in creating the small button but I need the spacing around it reduced as well (on a mobile especially) so that I achieve the design on the link.

Please do you have any other solutions?

Thanks

Jane

Sorry, last thing. I have Reviews on the home page using “Content Slider”. It has 2 columns on desktop, but how can I have it show just 1 Column on Mobile view?

Thank you!!!

tanx Mike, i tried few things using the html i ‘m afraid if wont do. i think there is a progress to be made in this topic by the enfold team.

Hi Guenni007,

It’s not about shrinking header the problem now, it is about the CSS codes for mobile and tablets which is not applied on my site, I don’t understand what happen ?

I added several CSS codes for mobile and tablets but they are not taken into account:

/* 📱 MOBILE (jusqu'à 768px) */

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #header_main_alternate {
    display: block;
  }

  .responsive #top #header .main_menu {
    width: auto !important;
  }

  #header_meta .phone-info-custom::before {
    background-color: #ffffff !important;
  }
    .responsive #top #wrap_all .main_menu {
        left: 0px !important;
    }
    .responsive #top .logo {
        width: 50% !important;
    }

.responsive #top #wrap_all .container {
    float: right !important;
}

#header_meta .phone-info-custom {
    font-size: 15px;
    font-weight: 800;
    color: #000000;
    padding-top: 70px;
}
#header_meta .container {
     max-width: 50% ;
    margin-left: 0px;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/*PHONE INFO*/
#header_meta .phone-info-custom::before {
  display: none !important;
}
.phone-info {
    padding-top: 5px !important;
}

/*LOGO*/
.responsive .logo img {
    float: right !important;
}

    .responsive #top .logo {
        position: static;
        display: table;
        height: 80px!important;
        float: none;
        padding: 0;
        border: none;
        width: 95%;
}
.main_menu {
    margin-left: 0px !important;
}
a {
    padding-left: 0px !important;
}
@media only screen and (max-width:767px) {
    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
        padding-left: 0;
    }
}}

/* 💻 TABLETTE (entre 769px et 1024px) */
@media only screen and (min-width:768px) and (max-width:989px) {
    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
        left: 0 !important;
    }
}

Thank you Ismael, that is fantastic and has made the spacing work now on desktop.

Please can you tell me how to add space above the strapline/top menu on a mobile view?

Thanks

Jane

Hi,
It’s really a topic since a couple of years.
Thanks for the feedback.
Please close the topic.

KR
T

Thank you!

Almost there. I can’t work out how to lower the strapline ‘The active place to play’ so that it is more centred vertically on the top bar.

Please can you help?

Thanks