I am looking to move my logo all the way to the left of my mobile site and everything else to the right like the photo attached. I am using Symmetry theme but am willing to use Dawn.
All codes that I have entered in base.css or theme.liquid that I have found online, only work for the desktop and not my mobile site.
Please help! Thanks!!
Hey To move your logo to the left of your mobile site and align other elements to the right, you’ll need to modify the CSS for mobile responsiveness in your theme files. Look for media queries targeting mobile devices and adjust the positioning of the logo and other elements accordingly. If you’re not comfortable with coding, consider reaching out to a Shopify developer for assistance.
Hi, Thanks for the response.
I have tried copying and pasting code in (edit code) but nothing changed on my mobile site for some reason. I tried multiple different codes both in liquid and css
Thanks!
If pasted code isn’t affecting your mobile site in the Symmetry theme, ensure you’re targeting the correct CSS classes and applying the changes within appropriate media queries. If issues persist, consider reaching out to Shopify support or a developer for assistance
I am doing it exactly how they are saying to do so. I just don’t understand why it isn’t working. I have never had this problem before
If you’re not understand consider reaching out to a Shopify developer for assistance
Can you find me a developer to answer my question here?
Thanks!
Hi @fg23
Can I take a look, would you mind to share your store URL? Thanks!
I recommend posting your request on platforms like Upwork or Fiverr, where you can find skilled Shopify developers. Describe your needs, and you’ll get bids from experts who can help you
If you found this helpful, you can buy me a coffee!
Hi @Made4uo-Ribe !
url is www.frenchgolf.com
Also, for desktop, I want it to look like this…The search icon can just be the icon, I don’t need it to have a search bubble
Thanks for the info, do you mean like this?
If it is check this one,.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
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 only screen and (max-width: 767px){
.logo-area__left {
order: 3;
}
.logo-area__left {
flex: none;
}
}
If you like to exchange the menu and the search replce for this one.
@media only screen and (max-width: 767px){
.logo-area__left {
order: 3;
}
.logo-area__left {
flex: none;
}
button.button.notabutton.mobile-nav-toggle {
order: 2;
}
.show-search-link__icon {
justify-content: center;
}
}
And Save.
Thanks so much for getting back to me!
Unfortunately, I do not have any of those .css in the assets folder
Go to the customize theme click the header on the left, and there will be tab visible on the right.
On the very end you will see this custom css.
paste it there and save.
Amazing! Your code is the only one that worked! You are the best thank you!!
Is it possible to make the header thinner as well?
How do I do that with Desktop as well? I want the logo as far left as possible like the image I sent
Im working on the desktop view. Im getting problem. Im not so sure what did you do to your header. 
It just came like that lol Is it the theme??
Do whatever you need to do to make it work!
I really appreciate you, thank you!!
Check this one for desktop.
@media only screen and (min-width: 1520px){
.logo-area.container.container--no-max {
display: grid;
grid-template-areas:
'logo nav nav nav icons';
}
.logo-area__left {
grid-area: nav;
}
.logo-area__middle.logo-area__middle--logo-image {
grid-area: logo;
}
.logo-area__right {
grid-area: icons;
}
}
And save.
Result:
To make it thinner.
Add this code.
@media only screen and (min-width: 1520px){
.logo-area.container.container--no-max {
height: 7.5rem;
}
.pageheader .logo {
padding-top: 10px;
}
}
And Save.
result:
Note: This is only for the desktop.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
