Navigation Main Menu Format

Highlighted
New Member
5 0 0

Hello,

I'm using the Trademark theme by Maestrooo. I have 2 different menus in the header i would like to reformat. One is the main menu, and the other shows "Login", "Cart", and the search icon. It's difficult to tell the two apart, and I'm wondering how to bring the latter menu above the other, but still offset to the right.

This is what it currently looks like for all pages:

menu differentiate.jpg

I think I need to add a "height: ##" somewhere. Either that or decrease the width between the categories of the first menu.

Thank you for your help in advance!

(code below is for the second menu)

 

        <nav class="header__secondary-nav">
          <ul class="header__links list--unstyled">
            {%- if shop.customer_accounts_enabled -%}
              <li class="header__link hidden-pocket">
                {%- if customer -%}
                  <a href="{{ routes.account_url }}" class="link">{{ 'layout.header.account' | t }}</a>
                {%- else -%}
                  <a href="{{ routes.account_login_url }}" class="link">{{ 'layout.header.login' | t }}</a>
                {%- endif -%}
              </li>
            {%- endif -%}

            <li class="header__link hidden-pocket">
              <a href="{{ routes.cart_url }}" class="header__cart-count-wrapper link" data-action="toggle-mini-cart">
                {{ 'layout.header.cart' | t }}
                <span class="header__cart-count">{{ cart.item_count }}</span>
              </a>
            </li>

            <li class="header__link">
              <a href="{{ routes.search_url }}" class="link" aria-label="{{ 'layout.header.search' | t }}" data-action="open-search">{%- render 'icon' with 'search' -%}</a>
            </li>

            <li class="header__link hidden-lap-and-up">
              <a href="{{ routes.cart_url }}" aria-label="{{ 'layout.header.cart' | t }}" data-action="toggle-mini-cart">
                {%- render 'icon' with 'cart' -%}
                <span class="header__cart-count">{{ cart.item_count }}</span>
              </a>
            </li>
          </ul>
        </nav>

 

0 Likes
Highlighted

Hello @civiv3 

Please share your site url.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

zyllioninc.myshopify.com

0 Likes
Highlighted

Hello @civiv3 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (min-width: 1025px) {
.header__logo {
	margin-right: 30px !important;
}
.header__main-nav {
	margin-top: 10px;
}
.header__secondary-nav {
	height: 30px;
	margin-bottom: 55px;
}
}

Changes are like shown in attached screenshot please check

Beauty-Products – Zyllion.jpg

Hope this will work for you.
Thanks!

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

hi @oscprofessional ! i've added that to the bottom of theme.scss.liquid, and got the following error. I've checked line 1609, and am unsure how to proceed without messing the code up.

 

Screenshot_2020-06-30 Zyllion ~ Customize ~ Trademark upgrade v3 7 1 06-26-2020 ~ Shopify.pngScreenshot_2020-06-30 Zyllion ~ Edit ~ Trademark Upgrade V3 7 1 06 26 2020 ~ Shopify.png

0 Likes
Highlighted

@civiv3,

I think you didn't close any bracket....

Please check line no 1609

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

hi @oscprofessional , sorry I updated my earlier post to provide more info

0 Likes
Highlighted
New Member
5 0 0

hi @oscprofessional I've checked line 1609, and am unsure how to proceed without messing the code up.

 

Screenshot_2020-06-30 Zyllion ~ Customize ~ Trademark upgrade v3 7 1 06-26-2020 ~ Shopify.pngScreenshot_2020-06-30 Zyllion ~ Edit ~ Trademark Upgrade V3 7 1 06 26 2020 ~ Shopify.png

0 Likes