Need coding help please!

[Luxelashenvy]

 

I’m using spotlight theme, I would like to center my logo exactly in the center on mobile website. I’ve selected center but it’s clearly to the left a bit. 
i would also like to add account icon in the header to mobile version and take out the log in bar in drawer menu. 
I would like to add search icon next to menu icon , and account icon next to cart icon? 
So it is 

menu - search - logo - account - cart 

thank you! 

[bryan76]

I know how to adjust it in Dawn theme. I just move it over manually in the Custom CSS of the header with something like:

@media screen and (max-width: 749px) {
.header__heading-logo {
margin-left: 30px;
}
}

you can adjust the pixels to make it perfect.  but I am not sure .header__heading-logo is correct in Spotlight.  you would need to inspect the code in the browser to find the name of the element for the logo if it does not work

[Luxelashenvy]

thank you so much ! this worked to center the logo!! really appreciate it 

[thescriptflow]

Hey @Luxelashenvy I hope you are doing well. Welcome to Shopify community to share what you want in your Shopify store. This is the place where you can find any type of solution.

Regarding your requirments I am ready to help you. 

1. Center the logo: In order to center the logo on mobile please paste this code in the end of base.css file. Here is how you can find base.css file. Online Store > Edit code > base.css.

@media only screen and (max-width: 767px){
.header__heading-logo {
    margin: 0px 0px 0px 20px !important;
}
}

You can adjust the value of Margin as per your need or requirements.

Results: 

I judge that to fulfil the other requirments require a take a look in your website then this is possible to fix it.

You can hire a Shopify Expert or reach me out.

Thanks

[Nilankar]

Hi! @Luxelashenvy It looks like the header code doesn’t match the original theme, possibly due to previous edits. Because of this, viewing and editing it properly isn't possible. You'll need someone to fix all the header issues to ensure everything works correctly.

Here is the Spotlight theme store image with some tweaks in CSS to achieve the desired result.

Css code Added in base.css 

/*Header icon button rearrangment */

@media screen and (max-width: 749px) {
    .small-hide {
        display: block !important;
    }
	.header--top-center>.header__search {
       display: block;
      position: relative;
      margin-left: 2.1rem;
    }
    .header--top-center *>.header__search {
      display: none;
    }
}