Navigation Bar Too Wide . How To Change It

Solved
Alshifa
Tourist
7 0 0

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 aboutUntitled-3.jpg

0 Likes
g33kgirl
Shopify Partner
223 59 75

This is an accepted solution.

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

 

 

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

 

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
Natztech
Shopify Partner
688 189 460

This is an accepted solution.

@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;
}

  

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Alshifa
Tourist
7 0 0

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

 

0 Likes
Alshifa
Tourist
7 0 0

Thanks you are just great.

0 Likes
Alshifa
Tourist
7 0 0

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

0 Likes

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;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Natztech
Shopify Partner
688 189 460

@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;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Alshifa
Tourist
7 0 0

Works for desktop but for mobile the header is still thick

0 Likes