Solved

How to move dropdown menu to the right and the logo all the way left

NHprpz
Tourist
5 0 0

Hello, i am trying to find any tutorial on how i can move the drop menu

all the way to the right and my logo to the left

Screenshot_20240208_204613_Chrome.jpg

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1724 477 352

This is an accepted solution.

Hey @NHprpz,

 

Follow these instructions 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

<style>
@media only screen and (max-width: 989px) {
    header#site-header {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    
    header-drawer {
        grid-column: 4 !important;
        margin-left: 0 !important;
    }    
}
</style>

 

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707397685814.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
1724 477 352

Hey @NHprpz,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
NHprpz
Tourist
5 0 0
ThePrimeWeb
Shopify Partner
1724 477 352

This is an accepted solution.

Hey @NHprpz,

 

Follow these instructions 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

<style>
@media only screen and (max-width: 989px) {
    header#site-header {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    
    header-drawer {
        grid-column: 4 !important;
        margin-left: 0 !important;
    }    
}
</style>

 

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707397685814.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
NHprpz
Tourist
5 0 0

Thank you

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @NHprpz 

 

Please add the below code to base.css file. 

 

@media screen and (max-width:480px){
  .header{
    grid-template-areas: " heading icons left-icons";
  }
  header-drawer{
    padding-left: 15px;
  }
  .header__heading-link{
    padding-left: 0px;
  }
}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

Dannyfor
Tourist
3 0 1

try to use float

#logo
{
    float: left; 
}

#dropdown-menu {
    float: right; 
}