I have pasted the CSS code in WP Code and it is ok.

I pasted the CSS code in the WP CODE plugin and it works again, I was able to create my CSS codes for tablet and mobile, they are well taken into account, while in the QUICK CSS window, they do not apply. How is this done?
I can’t put the link in clear because the site is not yet online.
Thank you for the time you gave me.

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;
    }
}

Hi,

It seems that CSS codes for mobile and tablet screens are not taken into account. I can’t apply the desired settings for mobiles and tablets.
What is wrong ?

Thank you again for your help,

• This reply was modified 4 days, 14 hours ago by sitadi.

Hi,

It works, thanks to you.
Is it possible to add a CSS code to reduce the header when scrolling the page?

Best regards,
Ida

• This reply was modified 1 week, 1 day ago by sitadi.

Thank you for your feedback.
Before asking you I had tried this solution but I was wondering if there was no other solution by moving the logo into a container aligned with the logo.
When I switch to mobile or tablet, the search bar display disappear and I can’t display it, I would like it over the entire width of the screen, under the logo.
Thank you for your help

• This reply was modified 1 week, 4 days ago by sitadi.
• This reply was modified 1 week, 4 days ago by sitadi.
• This reply was modified 1 week, 4 days ago by sitadi.
• This reply was modified 1 week, 3 days ago by sitadi.

Yes, I use Safari and I just noticed that this error does not happen on Google Chrome, thank you!

Hi Ismael,

Thank you for your answer.
I just updated the theme and I had already enter the name or slug “communes” in Enfold > Layout Builder > Activate Your Custom Post Types For ALB. Please find below what’s wrong :

I have already tried to enter texts in both areas but when I publish, the elements in the area built with AVIA BUILDER are not displayed.

Thank you for your help,
Best regards

• This reply was modified 2 weeks, 2 days ago by sitadi.

Thank you Ismael for your help.

Is there a solution to display a different header depending on the pages? For example, on the contact page, I want to display a header without the search bar, is it possible?

Thank you,
Best regards

Hello Rikard,

Can you help me to put the burger button and the logo in the foreground, they are hidden behind the search section. I tried to set up the z-index but nothing works.. So I can’t click on the menu or on the logo

On the other hand, la barre de recherche, dans la version mobile, reste affichée à l’écran, est-il possible de la coller tout en haut de l’écran lorsqu’on scroll vers le bas ?

Thank you very much in advance for your help

Hi Mike,

Thank you for your help. It is better with this CSS.
Can you please help me to find the best CSS for mobile display ? Every elements are superimposed. We can stay on the test site because the menu in the live site is not ready to work on it.
Best regards,

No, you can see that it doesn’t work : the columns that are animated are not displayed after the accordion, there is only one column present: the one that has no animation

If you delete the 2024 line and leave only YEAR, it will work. Numbers seems to be the problem

• This reply was modified 8 months, 1 week ago by sitadi.

Hi Rikard,

Nothing change when I deactivate all plugins.

Best regards,
Ida

I understand, thank you for your proposal. I would like you to leave the ticket open to see if there is a solution specific to Safari and see if it impacts the display on other browsers or not.
I don’t know where and how to “create a blank page public with the menu for other forum users to see and offer ideas” ?

Thank you again.
Best regards

Yes, I saw this option but I want to insert a rounded line (like a half circle) on the left side of each label, and when I insert the following css code

`#top #wrap_all #menu-item-27 .avia-menu-text, #menu-item-45 .avia-menu-text {
border-left: 5px solid;
border-radius: 50px;
border-color: #D60B52;
padding: 20px;
background-color: #ffffff;
padding: 15px 0px 15px 15px;
}`
I get lines on the right that I don’t want to see
Thank you for your help,