Debut Theme- Make menu a single line

Solved
Highlighted
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
Highlighted

This is an accepted solution.

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Tourist
5 0 1

Hi,

 

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

0 Likes
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Shopify Staff
Shopify Staff
1418 140 388

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

Highlighted
Excursionist
29 6 13

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