Make my sub-menu's sub-menu move to the right

[ManKaveStore]

I previously Googled and saw something that was very close to my answer.. So adding this at the bottom of my CSS file makes all my sub-menu items move to the right, but I don't want that. I want the sub-menu's sub-menu to go to the right instead of down. I will also attach a photo that kind of shows that I'm trying to do, and I also want the arrow that is pointing up to point left. (I have it pointing to the right in the regular submenu before opening the next submenu so I don't need that changed).

details[open] > .header__menu-item .icon-caret {
transform: rotate(270deg);
}
details[open] > .header__submenu {
top: 0;
left: 100%
}

 

[LuffyOnePiece · Accepted solution]

Hi @ManKaveStore ,

Can you please try adding the below CSS?

details[open] {
    position: relative;
}

ul.header__submenu details[open] > .header__submenu {
    position: absolute;
    left: 100%;
    border-radius: var(--popup-corner-radius);
    border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
    border-style: solid;
    border-width: var(--popup-border-width);
    box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
    background: var(--gradient-background);
    top: 0;
}

ul.header__submenu details[open] > .header__menu-item .icon-caret {
    transform: rotate(270deg);
}

Result:

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[LuffyOnePiece]

Hi @ManKaveStore ,

Can you please send me the store preview URL so that I can assist you?

Thank you.

[ManKaveStore]

https://www.totalweeb.store/

[LuffyOnePiece · Accepted solution]

Hi @ManKaveStore ,

Can you please try adding the below CSS?

details[open] {
    position: relative;
}

ul.header__submenu details[open] > .header__submenu {
    position: absolute;
    left: 100%;
    border-radius: var(--popup-corner-radius);
    border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
    border-style: solid;
    border-width: var(--popup-border-width);
    box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
    background: var(--gradient-background);
    top: 0;
}

ul.header__submenu details[open] > .header__menu-item .icon-caret {
    transform: rotate(270deg);
}

Result:

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[ManKaveStore]

You are the GOAT! Very much appreciated! Great name too.

[ManKaveStore]

I mean I don't want to push my luck and ask too much.... But is there anyway to make it to when clicking the next menu it closes the previous one? So I don't have overlapping menus? 

 

[LuffyOnePiece · Accepted solution]

Hi @ManKaveStore ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
const detailsElements = document.querySelectorAll('ul.header__submenu details');

detailsElements.forEach(details => {
  details.addEventListener('click', () => {
    detailsElements.forEach(otherDetails => {
      if (otherDetails !== details) {
        otherDetails.removeAttribute('open');
      }
    });
  });
});
</script>

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

[ManKaveStore]

It is awesome that people like you exist. Thanks again.

[ManKaveStore]

I can't help but feel hesitant to ask for more help than you've given already, but I do have one more thing I've been having a real hard time with. Ok, so this theme comes with a magnifying glass you have to click, and I didn't like that so I created a snippet named 'ezfy-header-search'. 

1) I would like my logo to be further left if possible, I could never push it more to the left no matter what I tried.. 

2) If I shrink my screen - it ends up showing 2 search bars (probably because of the ezfy snippet) and I used 'display: none' on the original theme's search bar. Is there any good way to clean this up?

Here is store preview - https://www.totalweeb.store/?_ab=0&_fd=0&_sc=1  (this version has ezfy and css changes from the original)

Here is the 'EZFY' snippet.

{% comment %}
  Always visible search bar by ezfycode.com
{% endcomment %}

{% assign predictive_search_height = 500 %}
{% assign search_box_width = 1200 %}

<div class="EzfyHeaderSearch EzfyHeaderSearch--{{ device }}">
  {%- if settings.predictive_search_enabled -%}
    <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
  {%- else -%}
    <search-form class="search-modal__form">
  {%- endif -%}
  <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
    <div class="field">
      <input
        class="search__input field__input"
        id="{{ input_id }}"
        type="search"
        name="q"
        value="{{ search.terms | escape }}"
        placeholder="{{ 'general.search.search' | t }}"
        {%- if settings.predictive_search_enabled -%}
          role="combobox"
          aria-expanded="false"
          aria-owns="predictive-search-results"
          aria-controls="predictive-search-results"
          aria-haspopup="listbox"
          aria-autocomplete="list"
          autocorrect="off"
          autocomplete="off"
          autocapitalize="off"
          spellcheck="false"
        {%- endif -%}
      >
      <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
      <input type="hidden" name="options[prefix]" value="last">
      <button
        type="reset"
        class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
        aria-label="{{ 'general.search.reset' | t }}"
      >
        <svg class="icon icon-close" aria-hidden="true" focusable="false">
          <use xlink:href="#icon-reset">
        </svg>
      </button>
      <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
        <svg class="icon icon-search" aria-hidden="true" focusable="false">
          <use href="#icon-search">
        </svg>
      </button>
    </div>

    {%- if settings.predictive_search_enabled -%}
      <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
        <div class="predictive-search__loading-state">
          <svg
            aria-hidden="true"
            focusable="false"
            class="spinner"
            viewBox="0 0 66 66"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
          </svg>
        </div>
      </div>

      <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
    {%- endif -%}
  </form>
  {%- if settings.predictive_search_enabled -%}
    </predictive-search>
  {%- else -%}
    </search-form>
  {%- endif -%}
</div>

<style>
/* mobile */
@media (max-width: 767px){
  .EzfyHeaderSearch--mobile{
  display: block;
  }
  
  .EzfyHeaderSearch--desktop{
  display: none;
  }
  
  .EzfyHeaderSearch--mobile  {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 10px;
  margin-top: 20px;
  }
  
  body{
  overflow-x: hidden;
  }

  [id] .header{
     display:flex !important;
  flex-wrap: wrap;
  justify-content:space-between;
}


}

/* desktop */
@media (min-width: 991px){
  .EzfyHeaderSearch--mobile{
  display: none !important;
  }
  
  .EzfyHeaderSearch--desktop{
  display: block;
  }
  
  .predictive-search__results-groups-wrapper{
  flex-direction: column !important;
  }
  
  .search-modal__form,
  .search-modal__form > *{
  /*width: {{ search_box_width }}px !important;*/
  width: 50vw;
  max-width: 100% !important;
  }
  
  .predictive-search{
  max-height: {{ predictive_search_height }}px !important;
  }

}
</style>
<script>
  
  (() => {var e=["background: linear-gradient(-47deg,#8731e8,#4528dc)","border: 1px solid #3E0E02","color: white","display: block","text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)","box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset","line-height: 40px","text-align: center","font-weight: bold","padding: 0px 5px"].join(";");function r(e){return(e+"").replace(/&#\d+;/gm,function(e){return String.fromCharCode(e.match(/\d+/gm)[0])})}var n=r(`&#87;&#101;&#98;&#115;&#105;&#116;&#101;&#32;&#112;&#111;&#119;&#101;&#114;&#101;&#100;&#32;&#98;&#121;&#32;&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;&#101;&#122;&#102;&#121;&#99;&#111;&#100;&#101;&#46;&#99;&#111;&#109;`);console.log(`%c ${n}`,e);})()

</script>

[ManKaveStore]

Oh, and this is the last one I promise!! Is there a way to change the review and text color on the reviews? It is using a third party app, so I wasn't sure about that. If I try to use my usual dark background, the stars and review text isn't visible. So I've been keeping it white so you can see the stars and text. It's really not that big of a deal, I think it is fine how it is but it was something I was thinking about. The search bar thing is really my biggest issue.

[Alykhan101]

Hey tried your code and it worked perfectly but its glitching the search bar and in mobile view the drop down menu and search bar both are glitching. could you kindly help me with these