Navigation Bar Too Wide . How To Change It

Technical Q&A
1

Dear Experts.

Our website is showing too thick navigation bar. Please advice how to change the same. Because its looking bad on Desktop and on mobile its look even far worse.

Help shall be appreciated

Our website is www.alshifa.com.pk

Password to enter store is DTTest

Attaching picture also for an IDEA what i am talking about

Untitled-3.jpg
Untitled-3.jpg1366×768 76.9 KB

2

You can add this at the end of your CSS file (Themes → Edit code → Assets → theme.scss.css :disappointed_face:

.g-breadcrumb {
    padding: 10px !important;
}
1 Like
3

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

.breadcrumb {
	padding: 10px 0 !important;
}
.main-content{
	padding-top: 10px !important;
}
3 Likes
4

Thanks a bunch it worked. You are an angel !

Also please need help for header. Its too thick when seen from mobile. How to narrow down that .

Our website URL is alshifa.com.pk Password to enter website DTTest

Below screenshot for understanding as to what we need

Please can you help

Untitled-4.jpg
Untitled-4.jpg1366×768 121 KB

5

Thanks you are just great. :slightly_smiling_face:

6

Also please need help for header. Its too thick when seen from mobile. How to narrow down that .

Our website URL is alshifa.com.pk Password to enter website DTTest

Below screenshot for understanding as to what we need

Please can you help

Untitled-4.jpg
Untitled-4.jpg1366×768 121 KB

7

Hello Alshifa,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (max-width:767px){
.header-bottom.py-2.py-lg-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.site-header__logo img {
    padding: 0px !important;
}
main#MainContent {
    padding-top: 0px !important;
}
}
8

@Alshifa please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot http://prnt.sc/126oaig

@media only screen and (min-width: 1024px){
.site-nav__link {
    padding: 30px 15px !important;
}
.header-bottom{
	max-height: 90px !important;
}
.site-header__logo img {
    padding: 0 !important;
}
}
3 Likes
9

Works for desktop but for mobile the header is still thick :disappointed_face: