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

NHprpz · ‎02-08-2024

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

ThePrimeWeb · ‎02-08-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-08-2024

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
Check out our interview with Shopify!

NHprpz · ‎02-08-2024

https://www.norahpearls.shop/

ThePrimeWeb · ‎02-08-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

NHprpz · ‎02-08-2024

Thank you

Zeel-prajapatii · ‎02-08-2024

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 · ‎02-08-2024

try to use float

#logo {
float: left;
}

#dropdown-menu {
float: right;
}

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