Jump to content

7.1 Bolding the first item in the navigation bar

Go to solution Solved by ErikaT,

Recommended Posts

Site URL: https://www.impactpa.church/

Hello!

On my website I'm trying to bold the first item in the navigation bar to make it more noticeable. I haven't had any luck so far with some things I've found online.

I've tried this:

.Header-nav--primary .Header-nav-item:first-child{
font-weight: 700
}

and have also set it font-weight equal to bold, but I'm not seeing any changes. Any help is appreciated!

Link to comment
  • 2 weeks later...
On 3/12/2021 at 8:15 AM, IMPACT said:

Thanks again, it's working great!

Do you want to align left or right or center all elements in footer mobile?

You can use this CSS

/* Center footer mobile */
@media screen and (max-width:767px) {
div#page-section-5f3191439aec11022b6c195a * {
    text-align: center !important;
}
}

image.thumb.png.f9d8e40e176483fbc85a86c79b038ae4.png

ON tablet, the footer doesn't look good.

Do you want to decrease text size, increase columns width?

image.thumb.png.bc718d4ee1a4b66cc375965002959365.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
20 hours ago, IMPACT said:

For the last part where you mentioned it not looking good on tablet.

Remove logo on tablet only. What do you think?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
17 hours ago, IMPACT said:

That would work! How do I do that?

Add to Design > Custom CSS

/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f3191439aec11022b6c195a .span-12>.row>.span-4 {
    display: none;
}
div#page-section-5f3191439aec11022b6c195a .span-12>.row>.span-8 {
    width: 100%;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 9/8/2021 at 8:26 PM, Yaraf said:

Hello I applied this code to change one element color on the phone menu but it's also changing the same item on desktop. Any idea how to solve this?

Hi,

What is your site url? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
On 3/8/2021 at 8:16 PM, ErikaT said:

Hi,

Try:

.header-nav-item:nth-child(1) {
font-weight: 700;
}

Hiya, sorry i've just seen this code and it worked on my website computer screen but I forgot how to write code so it transitions to mobile version too.. do you know how I can make the bold text seen on both versions please? Thanks

(www.cobbledstreetshop.co.uk) 

Link to comment
On 3/11/2022 at 2:29 AM, Ecold said:

Hiya, sorry i've just seen this code and it worked on my website computer screen but I forgot how to write code so it transitions to mobile version too.. do you know how I can make the bold text seen on both versions please? Thanks

(www.cobbledstreetshop.co.uk) 

Mobile needs this code

.header-menu-nav-folder[data-folder="root"]>div>div:nth-child(1) a {
    font-weight: 700;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
On 11/11/2022 at 2:28 AM, Dstv said:

Hi there! I'd like to bold my store menu at vpicervico.com 

Any chance you can help me out? Many thanks. 

Use this CSS

div.header-nav-item:nth-child(1)>a {
    font-weight: bold;
}
.header-menu-nav-folder[data-folder="root"]>div>div:nth-child(1) a {
    font-weight: bold;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.