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

Solved

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

ralo
Tourist
3 0 0

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. 

Screenshot 2024-11-21 at 1.46.40 PM.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9029 2160 2664

This is an 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:
  • Made4uoRibe_0-1732228426570.png

     

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
9029 2160 2664

This is an 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:
  • Made4uoRibe_0-1732228426570.png

     

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
ralo
Tourist
3 0 0

@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, 

Screenshot 2024-11-21 at 4.52.14 PM.png

DaisyVo
Shopify Partner
775 102 116

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

 

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Made4uo-Ribe
Shopify Partner
9029 2160 2664

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

 

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

 

And Save. 

Result:

Made4uoRibe_0-1732283037277.png

 

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
ralo
Tourist
3 0 0

@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!


Screenshot 2024-11-22 at 12.20.17 PM.png