Move navbar to the right (close to the Cart icon)

Solved
New Member
8 0 0

Hey guys,

 

My site is: https://llnicowatches.myshopify.com/

Pass: aaaa (or aaaaa).

 

I want to move the "Contact" link on the navbar right beside of the Cart icon. How is this possible?

 

Thanks!

 

PS: Debut theme.

0 Likes
Shopify Expert
2461 414 519

Hi @LLW 

Follow this..

Open Section->header.liquid file and find bellow line:

<a href="/cart" class="site-header__icon site-header__cart">

Now add bellow line next to above </a>

<a href="/pages/contact-us" class="site-nav__link site-nav__link--main">
     <span class="site-nav__label">Contact</span>
</a>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Shopify Partner
1125 90 137

hi,

LLW

hope you doing good

try this

 

.site-nav {
 text-align: right;
Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
8 0 0

I found this:

 

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">

 

I added the code you provided but nothing changed!

I appreciate your time mate!

0 Likes
New Member
8 0 0

Can you please let me know where to add this?

0 Likes
Shopify Expert
665 170 199
Hi, @LLW ,
This is Evita from On The Map.
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code at the bottom of file
 
@media only screen and (min-width: 750px){
   nav #SiteNav {
    position: absolute;
    right: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 17px;
   }
}
 
Best, Evita
 
 
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Shopify Expert
2461 414 519

Find bellow code:

 <a href="/cart" class="site-header__icon site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            {% if cart.item_count > 0 %}
              <div id="CartCount" class="site-header__cart-count">
                <span>{{ cart.item_count }}</span>
                <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
              </div>
            {% endif %}
          </a>

Now paste by given code next to this 

a href="/pages/contact-us" class="site-nav__link site-nav__link--main">
   <span class="site-nav__label">Contact</span>
</a>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
8 0 0

Evita,

 

It worked! Almost... your solution is almost there but one little thing. The text is not a link anymore...

0 Likes
New Member
8 0 0

It didn't work:

 

pr.png

0 Likes

Success.

Shopify Expert
665 170 199

Ah yes, just add z-index: 

@media only screen and (min-width: 750px){
   nav #SiteNav {
    position: absolute;
    right: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 17px;
    z-index: 1000;
   }
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes