Need help with some heading text questions, spacing between buttons on Debut theme

Solved
Tourist
32 0 0

Hi. Here's a preview of my shop with the current coding added to the bottom of the theme.scss.liquid. I've asked about this not too long ago, got some help from a Evita from OTM (ty again), but there were some things that didn't work out properly.

 

https://l7l1sn70u2m5dfwk-10717790244.shopifypreview.com

 

// This is for title
.section-header h2 {
    font-size: 30px;
  font-weight: bold;
}

// This is for navigation
.site-nav li {
    font-size: 22px;
    font-weight: bold;
}

.site-nav__dropdown ul li {
    font-size: 16px;
}

These are the code I currently have at the bottom of my theme.scss.liquid.

 

I'm looking to uppercase my header without uppercasing every other headers. Only the one on the navigation menu on top.

 

I'm also looking to make it so that it will also affect the "Shop Now", as the code I've inputted in has made it look the way it does.

 

I'm also wondering if there's a way to make the text more tighter, rather than being spaced apart like it is -- along with the "View all" button under the collection a little closer to the product itself.

 

Thanks!

0 Likes

Just to clarify, you want the menu buttons uppercase e.g. "SHOP NOW"?

Developer for Crafty Party Box
0 Likes
Tourist
32 0 0

Yes, including the Shop Now button, but I'd also like to know if there's a way to make it so the drop down list is a different size/style.

0 Likes
Shopify Expert
665 170 199

Hey again @MichaelChuwee,

 

replace .site-nav__dropdown ul li with this

 

.site-nav--has-dropdown .site-nav__label {
font-size: 22px;
font-weight: bold;
}

You want to uppercase this? https://prnt.sc/pana69

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
32 0 0

Thanks for that!

 

header.PNG

Just this part. Also, any code that would make the dropdown list smaller?

 

header2.PNG

 

I would love to keep the text size/style of the header on top, but the dropdown list, I'd like to make it smaller sized/normal styled.

0 Likes

Success.

Shopify Expert
665 170 199

CSS code for that: 

.site-nav__child-link .site-nav__label {
    font-style: 300;
    font-size: 17px;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
32 0 0

Thank you very much! And how about the uppercasing on the menu? Sorry, actually forgot to say I did want to make it uppercase but the editing didn't seem to go through.

0 Likes

Success.

Shopify Expert
665 170 199

 

.site-nav--has-dropdown .site-nav__label {
   font-size: 22px;
   font-weight: bold;
   text-transform: uppercase;
}
.site-nav li {
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}
.site-nav--has-dropdown .site-nav__label {
font-size: 22px;
font-weight: bold;
text-transform: capitalize;
}

 

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
32 0 0

Thanks a lot! I've tinkered it a bit around but everything is how I'd like it. There's a few more things I'd like to change but for now I think it's totally fine. Spacing between the menu texts from each other along with the spacing between the product collection and the "view all" button are just another few questions I have.

 

I know without a doubt I'll be looking to tinker it a bit more, but for now this will do. Appreciate it again!

0 Likes
Shopify Expert
665 170 199

Your Welcome :)

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes