Solved

Main menu in header on one line

Molly8
Trailblazer
225 16 31

Hi

Can anyone please tell me how to put my main menu on one line without reducing the text size. I would also like it to come down slightly to line up with logo. Thanks.

mollycoddle-meg.myshopify.com

Password - preepi

Accepted Solutions (3)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Molly8 

sorry for that issue but i can see now 1 line 

KetanKumar_0-1627956922398.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Denishamakwana
Shopify Partner
1408 173 231

This is an accepted solution.

I try to give my best to your site looking good 

sorry but here I slightly change the font size of header font

please try to given code in theme.css 

.site-header__logo img {

         width: 250px!important;

}

.site-nav a {
     padding: 3px 8px;
@media only screen and (min-width: 750px){
.medium-up--one-half {
       width: 65%;
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

View solution in original post

Molly8
Trailblazer
225 16 31

This is an accepted solution.

Hi

FANTASTIC!! It worked. Thank-you so much for your help.

 

View solution in original post

Replies 20 (20)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Molly8 

sorry for that issue but i can see now 1 line 

KetanKumar_0-1627956922398.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Molly8
Trailblazer
225 16 31

Hi

Sorry for the delay. It must be the computer I am viewing it on. Would you be able to push it over to the right slightly so there the same padding between the logo and the icons on the right?

Thanks

Kinjaldavra
Shopify Partner
2302 570 1422

hello @Molly8 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 789px){
.site-header  .grid .grid__item:nth-child(3) {
	width: 10% !important;
}
.site-header  .grid .grid__item:nth-child(3)  .site-header__icons-wrapper{
	justify-content: center !important;
}
}

 

Molly8
Trailblazer
225 16 31

Hi

No that didn't work but it may the size of screen i'm viewing it on. I do have the different Shopify views, mobile, desktop and fullscreen but my laptop is only 11 inch. Would this make a difference?

Thanks

Molly8
Trailblazer
225 16 31

Hi

Ive made the font slightly smaller which has now put the main menu into one line but it would be nice to be able to have the main menu moved to the right slightly to fill the gap evenly between the logo and the search, login, basket icons. If thats possible, that would be great.

Kind regards

 

 

 

Kinjaldavra
Shopify Partner
2302 570 1422

hello @Molly8 

I see your store it's already have to  fill the gap evenly between the logo and the search

Denishamakwana
Shopify Partner
1408 173 231

This is an accepted solution.

I try to give my best to your site looking good 

sorry but here I slightly change the font size of header font

please try to given code in theme.css 

.site-header__logo img {

         width: 250px!important;

}

.site-nav a {
     padding: 3px 8px;
@media only screen and (min-width: 750px){
.medium-up--one-half {
       width: 65%;
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Molly8
Trailblazer
225 16 31

This is an accepted solution.

Hi

FANTASTIC!! It worked. Thank-you so much for your help.

 

Molly8
Trailblazer
225 16 31

Hi

Sorry but I've just realised my logo has shrunk considerably. Can this be made bigger? It looks like there is enough room for the padding to shrink slightly.

Thanks.

Molly8
Trailblazer
225 16 31

Hi

Ketankumar sent me an answer with a screenshot of my site and that is the size that I want my logo, thanks.

KetanKumar
Shopify Partner
36839 3635 11972

@Molly8 

i mean i can see 1 line now which screen for issue?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Molly8
Trailblazer
225 16 31

Hi

There is no problem now with the single line, thats fine. But I then asked for my main menu to be moved over to the right so I assumed the padding inbetween the logo and the main menu has been changed. This has made my logo smaller.

 

Regards

KetanKumar
Shopify Partner
36839 3635 11972

@Molly8 

can you please provide screenshot further issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Molly8
Trailblazer
225 16 31

Hi

Thanks for your response. 

I'm really struggling to send you a screen shot because it won't accept any image file extension. I converted to mp4 but it wouldn't upload.

I will have to explain instead.

On my header the logo needs to be considerably bigger. It has shrunk, due to I assume, the padding added between the logo and the start of the main menu. Could you give some more room to my logo please.

mollycoddle-meg.myshopify.com

Password - preepi

Thanks in anticipation.

 

Molly8
Trailblazer
225 16 31

Molly8_0-1628148686817.png

 

Hi, this is the screenshot you sent me on 02/08/21. This was the original size of my logo before the main menu was moved more to the right. The menu is great now but I would like my logo back to this size please if possible.

KetanKumar
Shopify Partner
36839 3635 11972

@Molly8 

can you please try this 

header.site-header.border-bottom.logo--left {
    background-color: var(--color-body);
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Molly8
Trailblazer
225 16 31

Hi

No, the logo is the same, too small and it has gotten rid of my two colour bands each side of my header which I want.

 

Regards

KetanKumar
Shopify Partner
36839 3635 11972

@Molly8 

remove top and bottom blank spacing in logo

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Molly8
Trailblazer
225 16 31

Hi

I have tried that with no success at the moment. But I am waiting for a reply back from Canva regarding my design to see if they can help.

Thanks for your help so far and I will let you know how I go on.

kind regards

Molly

 

Molly8
Trailblazer
225 16 31

This is the size of my logo after removing the code you gave me which moved the main menu over to the right. Is there anything that can be changed in that coding to still move the main menu but leave the logo as it is?

Getting desperate now.

mollycoddle-meg.myshopify.com

Password: preepi

Kind regards

Molly