Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello
i'd like to move my logo to the left in the menu, along the same line as the menu. There is currently only an option to have this centrally and it makes my header too big.
can anyone help me?
pw: weuhai
TIA
Solved! Go to the solution
This is an accepted solution.
sorry for that issue bt can you please check your theme setting may be allow this option if doesn't can you try below code
1. Go to Online Store->Theme->Edit code
2. Asset->/main-header.css ->paste below code at the bottom of the file.
@media (min-width: 992px) {
.\#main-header-toolbar.\@start {
display: none;
}
}
This is an accepted solution.
sorry for that issue bt can you please check your theme setting may be allow this option if doesn't can you try below code
1. Go to Online Store->Theme->Edit code
2. Asset->/main-header.css ->paste below code at the bottom of the file.
@media (min-width: 992px) {
.\#main-header-toolbar.\@start {
display: none;
}
}
Thanks @KetanKumar - that works, however because the logo is quite tall i have a lot of white space, is it possible to reduce the margin for the menu line so that moves up closer to the logo?
thanks
Jo
Was looking for this same solution. So thanks!
The only other thing i need to do is bring the menu up on lien with the logo. Do you have a solution for this? See example. I would like the menu to be in-line with the logo just to the right of it.
do you have any issue?
can you please share your store url and example link also
Hi @KetanKumar . My store address is www.fastlineindustries.com
I would like the menu to be in the same line as the logo.
Best
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/main-navigation.css ->paste below code at the bottom of the file.
.\#main-nav-container {
position: absolute;
left: 0;
right: 0;
top: 15px;
}
Hello @JKP84
add this code to your core.css file.
Navigate to online store >> Click edit theme code.
Now find core.css and paste the following code:
@media (min-width: 1000px){
#main-header .strip-link{margin-bottom: -90px;}
.#main-header-inner-container {display: block !important;}
}
I hope it will be helpful for you.
Did it solve your issue?
- If yes, Like & Mark As Solution to help the community
- If not, let me know. also share a screenshot of the code that you added.