Jump to content

How do I edit my Shop/Store Category Header onto 2 or more lines.

Recommended Posts

Site URL: https://www.chrissiscauldron.com.au/shop/products

Hi all.
I'm new to all this... I've got my website built and working online... everything is pretty good so far. Shop is working well.
Trying to tweak a few things. One thing I'd like to try and do, and I can't work out for the life of me how to do it. How do I put the 'Shop/Store Category Header' onto 2 lines from the current default 1 line. It looks fine on a PC, but on mobile, you have to slide the header left/right to see the remaining product categories. Some people browsing my not realise it's a slider and won't see some of the other categories.
I'd attached a screenie of what it currently looks like, and a screenie of what I would like it to look like. I've created the 2nd in Photoshop to represent what I'm trying to do.
Any help in this matter would be appreciated.
Thanks in advance.

Shop Header #1.jpg

Shop Header #2.jpg

Link to comment
  • Replies 3
  • Views 612
  • Created
  • Last Reply

Top Posters In This Topic

On 3/13/2022 at 2:40 PM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
ul.nested-category-children li {
    width: 50%;
    justify-content: center;
}
ul.nested-category-children {
    max-width: 50%;
    margin: 0 auto;
}
}

 

Hi.
Thank you for your reply.
I tried it and it works on PC, however on a Mobile it still looks as before... strange.
Kind regards.

Link to comment
On 3/16/2022 at 1:01 AM, Chrissi_Lynch-Whitton said:

Hi.
Thank you for your reply.
I tried it and it works on PC, however on a Mobile it still looks as before... strange.
Kind regards.

The code runs on desktop only. If you want it make on all devices, try this new code

ul.nested-category-children li {
    width: 50%;
    justify-content: center;
}
ul.nested-category-children {
    max-width: 50%;
    margin: 0 auto;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.