www.fancyashley.com - The menu does not scroll along with the page

[webcompat-bot]

URL: https://www.fancyashley.com/

Browser / Version: Firefox Focus 8 Operating System: Android 8.0.0 Tested Another Browser: Yes

Problem type: Design is broken Description: The Menu is broken Steps to Reproduce:

From webcompat.com with ❤️

[softvision-sergiulogigan]

I can reproduce this issue on Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

Editing the position: fixed; to position: absolute; of

<nav class="nav-primary fix" aria-label="Main" itemscope="" itemtype="https://schema.org/SiteNavigationElement" id="genesis-nav-primary"><div class="wrap"><ul id="menu-main-menu" class="menu genesis-nav-menu menu-primary js-superfish sf-js-enabled sf-arrows" style="touch-action: pan-y;"><li id="menu-item-2805" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-2805"><a href="http://www.fancyashley.com" itemprop="url"><span itemprop="name">Home</span></a></li>
<li id="menu-item-2803" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2803"><a href="https://www.fancyashley.com/about/" itemprop="url"><span itemprop="name">About</span></a></li>
<li id="menu-item-2802" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2802"><a href="https://www.fancyashley.com/contact/" itemprop="url"><span itemprop="name">Contact</span></a></li>
<li id="menu-item-2804" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2804"><a href="https://www.fancyashley.com/faq/" itemprop="url"><span itemprop="name">faq</span></a></li>
<li id="menu-item-21975" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21975"><a href="https://www.fancyashley.com/category/amazon/" itemprop="url"><span itemprop="name">Amazon Favorites</span></a></li>
<li id="menu-item-2791" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2791"><a href="https://www.fancyashley.com/shopwithme/" itemprop="url" class="sf-with-ul"><span itemprop="name">Shop with me</span></a>
<ul class="sub-menu" style="display: none;">
    <li id="menu-item-6126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6126"><a href="https://www.fancyashley.com/women/" itemprop="url"><span itemprop="name">Women</span></a></li>
    <li id="menu-item-19989" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19989"><a href="https://www.fancyashley.com/todays-look/" itemprop="url"><span itemprop="name">Today’s Look</span></a></li>
    <li id="menu-item-17019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17019"><a href="https://www.fancyashley.com/gift-ideas/" itemprop="url" class="sf-with-ul"><span itemprop="name">Gift Ideas</span></a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-17642" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17642"><a href="https://www.fancyashley.com/gifts-under-50-2/" itemprop="url"><span itemprop="name">Gifts Under $50</span></a></li>
    </ul>
</li>
    <li id="menu-item-17908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17908"><a href="https://www.fancyashley.com/loft-sale/" itemprop="url"><span itemprop="name">Loft Sale</span></a></li>
    <li id="menu-item-21190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-21190"><a href="https://www.fancyashley.com/nordstrom-anniversary-sale-3/" itemprop="url" class="sf-with-ul"><span itemprop="name">Nordstrom Anniversary Sale</span></a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-21287" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-21287"><a href="https://www.fancyashley.com/category/nordstrom-anniversary-sale/" itemprop="url"><span itemprop="name">Nordstrom Anniversary Sale</span></a></li>
    </ul>
</li>
    <li id="menu-item-6117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6117"><a href="https://www.fancyashley.com/shopwithme/shophome/" itemprop="url"><span itemprop="name">Home</span></a></li>
    <li id="menu-item-6120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-6120"><a href="https://www.fancyashley.com/girls/" itemprop="url" class="sf-with-ul"><span itemprop="name">Girls</span></a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-17627" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17627"><a href="https://www.fancyashley.com/girls-gifts/" itemprop="url"><span itemprop="name">Girls Gifts</span></a></li>
    </ul>
</li>
    <li id="menu-item-6123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-6123"><a href="https://www.fancyashley.com/boys/" itemprop="url" class="sf-with-ul"><span itemprop="name">Boys</span></a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-17636" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17636"><a href="https://www.fancyashley.com/boys-gifts/" itemprop="url"><span itemprop="name">Boys Gifts</span></a></li>
    </ul>
</li>
</ul>
</li>
<li id="menu-item-4864" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4864"><a href="https://www.fancyashley.com/shop-my-instagram/" itemprop="url"><span itemprop="name">Shop My Instagram</span></a></li>
<li id="menu-item-14030" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14028 current_page_item menu-item-14030"><a href="https://www.fancyashley.com/videos/" itemprop="url"><span itemprop="name">Videos</span></a></li>
<aside class="widget-area"><h2 class="genesis-sidebar-title screen-reader-text">Nav Widget Area</h2><section id="simple-social-icons-2" class="widget-odd widget-last widget-first widget-1 widget simple-social-icons"><div class="widget-wrap"><ul class="alignright"><li class="ssi-email"><a href="http://www.fancyashley.com/contact/" target="_blank"><svg role="img" class="social-email" aria-labelledby="social-email"><title id="social-email">Email</title><use xlink:href="https://www.fancyashley.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-email"></use></svg></a></li><li class="ssi-facebook"><a href="https://www.facebook.com/TheFancyAshley" target="_blank"><svg role="img" class="social-facebook" aria-labelledby="social-facebook"><title id="social-facebook">Facebook</title><use xlink:href="https://www.fancyashley.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-facebook"></use></svg></a></li><li class="ssi-gplus"><a href="https://plus.google.com/103156721563927450565" target="_blank"><svg role="img" class="social-gplus" aria-labelledby="social-gplus"><title id="social-gplus">Google+</title><use xlink:href="https://www.fancyashley.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-gplus"></use></svg></a></li><li class="ssi-instagram"><a href="https://instagram.com/thefancyashley/" target="_blank"><svg role="img" class="social-instagram" aria-labelledby="social-instagram"><title id="social-instagram">Instagram</title><use xlink:href="https://www.fancyashley.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-instagram"></use></svg></a></li><li class="ssi-pinterest"><a href="https://www.pinterest.com/TheFancyAshley/" target="_blank"><svg role="img" class="social-pinterest" aria-labelledby="social-pinterest"><title id="social-pinterest">Pinterest</title><use xlink:href="https://www.fancyashley.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-pinterest"></use></svg></a></li><li class="ssi-youtube"><a href="https://www.youtube.com/c/FancyAshley" target="_blank"><svg role="img" class="social-youtube" aria-labelledby="social-youtube"><title id="social-youtube">YouTube</title><use xlink:href="https://www.fancyashley.com/wp-content/plugins/simple-social-icons/symbol-defs.svg#social-youtube"></use></svg></a></li></ul></div></section>
</aside><li class="search"><a id="main-nav-search-link" class="icon-search"></a><div class="search-div"><form class="search-form" itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction" method="get" action="https://www.fancyashley.com/" role="search"><meta itemprop="target" content="https://www.fancyashley.com/?s={s}"><label class="search-form-label screen-reader-text" for="searchform-5bb322fd3ae848.70956686">Search this website</label><input itemprop="query-input" type="search" name="s" id="searchform-5bb322fd3ae848.70956686" placeholder="Search this website …"><input type="submit" value="Go"></form></div></li></ul></div></nav>

fixes the issue.

[karlcow]

firefox left chrome right

Not sure what is broken here? Or at least it seems to be broken the same way in both browsers.

I don't see any position: fixed or absolute either in the CSS. Did the site change?

[softvision-sergiulogigan]

@karlcow I see that on your side the menu is not opened by default.

Here's a screen capture of the issue. See that the top menu is scrolled on Chrome, and fixed on Nightly.

[karlcow]

indeed I can't reproduce on RDM but can reproduce on the device. So basically it is opening the same way but on chrome it makes it small after.

[karlcow]

I now have the same behavior in Firefox Nightly 64 and in Chrome on the device.

[softvision-sergiulogigan]

Works now.

Tested on Samsung Galaxy S6 (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density) and Firefox Focus with GeckoView ON and OFF.