Hello,

I found this thread in a search because I am having the same issue.

An anchor link in the menu works flawlessly on desktop and on an iPad (including portrait orientation) in Chrome/Firefox/Safari, but doesn’t work at all on iphone/Safari. Tapping the link in the mobile menu closes the menu, but doesn’t scroll down to the anchor link whether you are on the homepage or any other page.

My client has noticed the issue, and wants to keep the anchor link so I need a fix if there is one.

Thanks in advance!

that is the reason why i asked if you have clicked the “salvare” button after inserting your settings. And then save the page.

PS it is now ( but check the above said please )

#top.page-id-918 #av_section_6 {
  background-color: #7bb0e7;
}

#top.page-id-918 #av_section_6 .flex_column.av_one_full {
  padding: 0 150px;
}

and ( hm?)

#top.page-id-918 #av_section_6.main_color {
  color: #eeee22;
}

this (huge padding left/right) is not the best method to restrict the content width; because what would you do on mobile?
There are settings on the column element itself to rule those settings for smaller screens. But – none of them is seen in the DOM – inspecting that page with dev tools.

now here is a pre question to be clear. After setting up your background-color on color-section – and the padding on 1/1 column :
Did you always complete the corresponding entries at the bottom of the element with “save” before you saved the page?

#top.page-id-918 #av_section_7 {
  background-color: #7bb0e7;
}

#top.page-id-918 #av_section_7 .flex_column.av_one_full {
  padding: 0 150px;
}

And btw. on all your other color-sections and 1/1 columns you do not have there a padding of 0 150px
The width is determined by manually set line-breaks !

see here my test page: https://webers-testseite.de/

my code to have a fixed header on mobile first – then after scroll a header with background-color:
because i do not see your page – the values ( of height / line-heigt etc. had to be adjusted ) – and I can give no better advice.
if your breakpoint is at 767px – change the media-query.

@media only screen and (max-width: 989px) {
    .responsive #top #wrap_all #header .container {
        width: 95%;
        max-width: 95%;
    }

  /* === values depends on if header_meta is present (80px + 35px) === 35px is the min-height of header_meta */
  #top #header {
    position:fixed !important;
    height:115px !important;
    max-height:115px !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 10px #eee;
    }

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

    .responsive #top .av-main-nav .menu-item-avia-special a {
        height: 80px !important;
        line-height: 80px !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;  / *** change to your needed bg-color *** /
    }

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

    /*** if you got header_meta ***/
    #top #header.av_header_transparency #header_meta .phone-info * {
        color: #FFF !important;   / *** change to your needed bg-color *** /
    }

    .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;  / *** change to your needed bg-color *** /
    }
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
        color: #FFF;  / *** change to your needed bg-color *** /
    }
    .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
        padding-top: 80px !important;
    }
    .responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet  #top #main {
        padding-top: 0 !important;
    }
}

there might be some rulesets not neccessary for your setting – but as mentioned above your page is in maintainance mode.

The blue box marks the container, which you set to 1500px in the Enfold settings – see my comment above : link
Since the font is set to centered, it will be placed in the middle of the container. If the size is smaller, there will be a gap to the outer edges of the blue box.

Originally, you can see in the first screenshot that there is a manually placed line break (<br>) at the point marked in red.
(click to enlarge the images)

In the second screenshot, I have removed this manual line break in my browser’s dev tools to show you that when there are no line breaks, these lines have the said 1500px width.

Where you are now reporting the lack of smaller widths, you have simply not set manual breaks as above inside the text-block elements.

you do not need to have multiple layersliders. On each layer you got on content tab :

– so for mobile content – duplicate that layer you like to have in a different way or position – and select your visibility option ( desktop, tablett, mobile)
– the first one you show on desktop and tablett – the copy – show on mobile.

now – if you like to change the way they look : – on top there is the preview mode:

select your mode – mobile (now all layers that belong to this mode are only editable and visible) – and edit now the content for that mobile layer.

sorry i did not read the whole text here on that topic; but if i see something with inline-svg : did you have any css rule managing the width or height of svg’s ?

__________________
so this might be offtopic – but that was one reason why some of my svg icons seems not to be in place

On former installations of mine – i use a snippet to convert all img tags that are svgs to inline svgs. those svg’s that do not have a width and height definition inside the svg code ( only viewport settings ) need an absolute width to be shown. Otherwise these svgs are listed as 0x0 dimension.
For those svgs i have set in my quick css a rule like:
#top #main svg {width: 1500px}
with those new svg icons we have on iconbox.css this rule:

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em;
  width:1em;
  margin-top:3px
}

so my setting for inline svgs is more selective – and wins the game!
to avoid that :

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em !important;
  width:1em !important;
  margin-top:3px
}