Hello, I hope you are having an amazing day! I am currently using the Empire theme by PixelUnion and I was wondering if there is a way to make my tabs at the very top shrink to the size of the screen. Using it on desktop, Phone, and everything else is perfect, I just noticed that only on Tablets the tab names kind of bunch up and look very weird. I have provided a picture. I am not sure if there is any code that could be used to auto adjust the font to the screen size or something like that. But any way to make it so the tabs are on one solid line instead of what appears to be two. Any help would be perfect! Thanks, Kyle 
It’s James from FoxEcom team, I just checked your store and saw that you do have many menu items there so if you want to show them on the 1 line we have to reduce the font size and spacing between items, please add custom CSS below to your theme, the result here: https://take.ms/rsNSV
@media (min-width: 1024px) and (max-width: 1280px) {
.site-header-main .site-header--full-width .site-navigation {
padding-left: 1.5rem !important;
}
.site-header-main .site-navigation summary {
font-size: 0.8rem !important;
padding: 12px 6px !important;
}
}
Please notice that this CSS just affects to device size like tablet
Hello, Thank you so much for all of your help, you are the best! Is there anyway you can guide me a little bit more and describe exactly where to put it. Does it go under the theme.css.liquid file or somewhere else? My apologies, I am still getting used to coding. Thanks, Kyle
Sorry for reply you late, there are many ways to add custom CSS to the theme, I recommend you put it to the layout/theme.liquid file, just wrap css in a CSS here then insert it before closing tag
Hey @James_FoxEcom Thank you so much! You are truly the best! I wanted to make sure this is the right place to put the code, so I took a picture and included it in this chat. Please let me know if this is correct or if there’s a different area. Thanks again for all of your hard work!
