How can I move logo to far left, separate the bkg color with the menu below, and expand search bar?

[ralo]

Hi there, 

I managed the separate the logo from the nav menu, but I want to:

1. continue to move logo to the far left
2. add a different background color to the nav below the logo
3. Expand the search bar and give it its own color 

Here's my site: stickersmania.store
Attached photo of what I'd like to accomplish. Please help. 

 

[Made4uo-Ribe · Accepted solution]

Hi @ralo 

TRy this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 989px) {
header.header.header--top-left.header--mobile-center.page-width {
    max-width: 100%;
}

.desktop-search .search-modal__form {
    width: 60rem;
}

.desktop-search {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.header-wrapper header:not(.drawer-menu).page-width {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0
}
    
h1.header__heading {
        padding-left: 5rem;
}

.header__icons {
        padding-right: 5rem;
}

nav.header__inline-menu {
    background: lightpink;
     padding-left: 5rem;
}  
.search-modal__form .field__input {
     background: lightgrey;
}
}
@media screen and (max-width: 1300px) {
.desktop-search .search-modal__form {
    width: 40rem;
}
}

@media screen and (max-width: 990px) {  
.desktop-search .search-modal__form {
    width: auto;
}
}

• And Save. 
• result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ralo]

@Made4uo-Ribe wow thanks so much! I managed to do it and edit the colors a bit. Will send coffee rn! 

Do you know how I can get rid of the black border around the search bar? I tried adding border none and outline none but that didn't do it, 

[DaisyVo]

Hi @ralo 

To complete your search bar requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.field__input:focus {
    box-shadow: unset !important;
}

Here is the result: https://prnt.sc/MoH66iL_tvzB

I hope this helps

Best,

Daisy

[Made4uo-Ribe]

Thank you for the tips, add this one. Same instruction. 

.field__input:focus-visible, .field__input:focus {
    box-shadow: none !important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ralo]

@Made4uo-Ribe 

1. I was able to make the border less black, but it's not gone completely. Is there a way to remove it completely like the photo attached? 

2. Kindly go to one of my stickers product pages here, can you see the logo all the way to the left without padding? How can I add padding so it only affects the product template and not the homepage where the logo looks good already. Please and thank you, will stay tuned!