Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 3, 2024 at 9:07 am #1436104
    LoPld

    Hi
    I have corrected a UI misconception in my website,
    The burger menu displays till 989px devices and causes the last elements of the menu to go in the banner image from 989px to 1240px devices.
    I’ve changed the css so this will make the burger menu display until 1240px devices.
    The problem is that my changes are not registered, as well when I place this snippet in the child theme CSS file, as well in the original CSS file (layout.css). I have cleared the browser and server caches with no effect as well. But I can see that my snippet is correct, checking it in the developper’s tool browser.

    I’ve got a second UI problem : On the production website, a row is starting on the 2nd position (in a particuliar page) instead of the first, making all elements not in place. I’ve looked in the back office of the testing website and production website, they are all the same. But, inspecting the developper’s tool in the browser, I found that a misplaced <div> has caused the issue on the production website. My question is : how do you modify html directly in enfold ? The testing website hasn’t got this bug and nothing was edited on the two websites.

    Thanks for your help

    March 3, 2024 at 3:01 pm #1436126
    Mike

    Hey LoPld,
    For your first question, I believe what you want is to have the burger menu show until 1240px, if this is correct then your css is wrong. Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (min-width: 768px) and (max-width: 1240px){
.responsive #top .av-main-nav .menu-item-avia-special {
    display: block!important;
}
#top #header .av-main-nav > li.menu-item  {
  display: none!important;
}
.responsive #top .av-main-nav .menu-item-avia-special {
    display: block;
}
#top #header .av-main-nav > li#menu-item-search.menu-item  {
  display: block!important;
}
.av-main-nav-wrap {
    float: right;
}
}
@media only screen and (min-width: 990px) and (max-width: 1240px){
#top #header .av-main-nav > li#menu-item-search.menu-item  {
  display: block!important;
  line-height: 118px;
}
#top #header .av-main-nav > li#menu-item-search.menu-item a {
    line-height: 118px;
}
.responsive.html_mobile_menu_tablet #top #wrap_all .menu-item-search-dropdown > a {
    font-size: 24px;
    color: #e8c100;
}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 3, 2024 at 6:29 pm #1436148
    LoPld

    Hi Mike,
    Thanks for your response and the snippet, it did work !
    Done for the first bug, one left to fix.
    Do you need more details for this one ?

    March 3, 2024 at 7:04 pm #1436150
    Mike

    Hi,
    I don’t see any misplaced div’s in your snippet above but when I check the two sites above, the site with the error has 4 tabs but only 3 tab sections, the first tab doesn’t have a tab section. Between the tab on the two pages the Collège 1 – Collectivités sections have a different number of elements, so I wonder if there is an unclosed strong tag and another html tag, this is the most common reason for errors.
    Try using the Avia Layout Builder Debugger and copy the content from the correct page and paste it into the page with the error and see if this corrects. If not try creating a new page with the copied debugger code from the good page and see if the error occurs again.
    Sometimes when a major error is saved into the database replacing the page is the only way to correct.

    Best regards,
    Mike

    March 3, 2024 at 7:18 pm #1436152
    LoPld
    This reply has been marked as private.
    March 3, 2024 at 9:10 pm #1436169
    LoPld

    Your solution did work
    Bug number 2 fixed

    Many thanks !

    March 3, 2024 at 9:13 pm #1436171
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘CSS modifications don’t apply to child theme stylesheet’ is closed to new replies.