7.1 Bolding the first item in the navigation bar

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!

On 3/8/2021 at 3:16 PM, ErikaT said:

Hi,

Try:

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

Worked like a charm, thank you!

I'm glad it helped 🙂

Would you know how to change the color of it?

.header-nav-item:nth-child(1) {
font-weight: 1000;
color: #5c4255;
}

I tried setting it like this but nothing is changing.

Hi there 🙂

You could try:

.header-nav-item a[href="/easter"], .header-menu-nav-item a[href="/easter"]
 {
    color: #5c4255 !important; 
}

You could also get rid of the earlier css to cut down on multiple entries and combine them:

.header-nav-item a[href="/easter"], .header-menu-nav-item a[href="/easter"] {
  color: #5c4255 !important; 
  font-weight: 1000;
}

Thanks again, it's working great!

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

ON tablet, the footer doesn't look good.

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

What would be your recommendation for it?

21 hours ago, IMPACT said:

What would be your recommendation for it?

Hi. Which problem?

6 hours ago, tuanphan said:

Hi. Which problem?

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

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?

On 4/29/2021 at 10:29 AM, tuanphan said:

Remove logo on tablet only. What do you think?

That would work! How do I do that?

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

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?

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

Hello, Thank you I solved this using custom css (breakpoints and page links)

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) 

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

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

Any chance you can help me out? Many thanks. 

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