Debut Theme- Make menu a single line

Solved
Tourist
5 0 1

My menu has gone across 2 lines and I would like to make it a single line. How do i reduce the margins around the logo and shopping cart section. I would prefer not to have to reduce my menu font if possible.

 

My website address is www.sleepdoctorgriffith.com.au

 

Thank you!

Jess

0 Likes

Success.

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (min-width: 750px)
{
.medium-up--one-half {
    width: 70%!important;
}
}
@media only screen and (min-width: 750px)
{
.medium-up--one-quarter {
    width: 15%!important;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
5 0 1

Thanks so much, this has helped to an extent. I have 3 more categories I need to get on the same line. What would you suggest to change?

 

Thanks again

Jess

0 Likes

Hello 

Add remaining menu i will check for the best possibility to adjust all menu in single line.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
5 0 1

Hi,

 

It's all on there. I may need to make the font smaller....

0 Likes

Its looking good.
If you want to make font size smaller :

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.site-nav li {
    font-size: 15px;
} 

Let me know if any help needed.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
5 0 1

Thanks for your help! It is still over 2 lines but I think it looks ok anyway.

 

Thanks again!

Jess


@oscprofessional wrote:

Its looking good.
If you want to make font size smaller :

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.site-nav li {
    font-size: 15px;
} 

Let me know if any help needed.


 

0 Likes

As i can see all menus are in single line:
176.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Shopify Staff
Shopify Staff
835 85 159

Hey there, @Jess84 

 

Bo here from Shopify Support!

 

Great job in helping out, @oscprofessional! I just wanted to point out one thing - the navigation in the Debut theme is responsive so a lot of the time it will entirely depend on the width of the screen your store is being viewed on, on my 13" screen it is on 2 lines still but on my 20" screen it appears on one. For ease of use and accessibility, we would encourage you to decrease the size of your navigation titles as opposed to the font - for example, Bedroom Furniture could be changed to just "Furniture" to make more space on the navigation without making your site any less accessible to those with visual impairments. 

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Excursionist
19 4 9

Hi,

follow my simple instructions:

1. go to customize  

2. open header section

3. Logo alignment change left to center 

4. save

now all menu a single line.

 

Thanks & Regards
Rbdtechworld

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: developer9it@gmail.com

1 Like