Solved

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

TotalWeeb
Excursionist
46 6 7

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

 

 websiteexample.png

Accepted Solutions (2)
LuffyOnePiece
Shopify Partner
406 65 66

This is an accepted solution.

Hi @TotalWeeb ,

 

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:

LuffyOnePiece_0-1711507511502.png

 

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


 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

LuffyOnePiece
Shopify Partner
406 65 66

This is an accepted solution.

Hi @TotalWeeb ,

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 9 (9)

LuffyOnePiece
Shopify Partner
406 65 66

Hi @TotalWeeb ,

 

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

Thank you.

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
TotalWeeb
Excursionist
46 6 7
LuffyOnePiece
Shopify Partner
406 65 66

This is an accepted solution.

Hi @TotalWeeb ,

 

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:

LuffyOnePiece_0-1711507511502.png

 

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


 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
TotalWeeb
Excursionist
46 6 7

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

TotalWeeb
Excursionist
46 6 7

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? 

 

 overlap.png

LuffyOnePiece
Shopify Partner
406 65 66

This is an accepted solution.

Hi @TotalWeeb ,

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
TotalWeeb
Excursionist
46 6 7

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

TotalWeeb
Excursionist
46 6 7

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?example1.png

 

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>

 

TotalWeeb
Excursionist
46 6 7

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.