[JacintaParticipant]

Hi there,

Kudos on the forum, it has answered most of my questions thus far… however, two things thing I still can’t find answers for, are:

1. how to change the font weight of the menu item on hover AND once it’s been clicked on (currently is is too fine, I’d like it bolder)
2. how to change the behaviour of the parent menu items after a SUB menu item is clicked. Currently, only the menu items that dont have subs stay highlighted when clicked, if you click on a sub menu item, the parent menu item loses its highlighted properties, so the visitor doesn’t know which menu tab they’re on in that case.

Thanks guys 🙂

[RupokMember]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[JacintaParticipant]

This reply has been marked as private.

[JacintaParticipant]

Hi there 🙂

While we are on this topic, I’d also like to increase the font weight of the portfolio sort fields if possible? Is there some code that will do that?

Thanks again

[LelyModerator]

Hi Luke,

1.) I can see that you have set Roboto on Customizer for navigation. This will only download the light font. We need to download the bold font for Robot so we can use it. To this, add the following line on your child theme’s style.css file at the top:
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
See attached screenshot.
Then you can add this custom CSS too:

.x-navbar .desktop .x-nav>li>a:hover,
.x-navbar .desktop .x-nav > .current-menu-item > a{
     font-weight: bold;
}

But then using different font weight on link hover is not recommended. This will result to menu link adjustment. Bolder font means more width space. You can see this effect on hover then it will adjust again when you remove the hover on go back to lighter font.

2.) To hightlight parent menu, use this custom CSS instead:

.x-navbar .desktop .x-nav > .current-menu-item > a {
    font-weight: bold;
}

Make sure this line was added on your child theme style.css file:
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

To adjust portfolio sort fields font size, please use this custom CSS:

.x-portfolio-filters, .x-portfolio-filter {
    font-size: 15px;
}

Adjust 15px accordingly.

Hope this helps.

Attachments:

You must be logged in to view attached files.

[JacintaParticipant]

Hi Lely,

Appreciate your help. If you look in the custom CSS section of my customizer, you’ll see that I’ve already inserted this code:

.x-navbar .desktop .x-nav > .current-menu-item > a {
font-weight: bold;
}

… which I found on another forum thread a few days ago, but it doesn’t change anything. The highlight parent menu code didn’t work either unfortunately 🙁 am I missing something?

This is what I have in my customizer:

/increase font weight of sub menu items*/

.x-navbar .desktop .x-nav>li>a:hover,
.x-navbar .desktop .x-nav > .current-menu-item > a{
font-weight: bold;
}

/highlight parent menu item*/

.x-navbar .desktop .x-nav > .current-menu-item > a {
font-weight: bold;
}

/increase size of portfolio sort fields*/

.x-portfolio-filters, .x-portfolio-filter {
font-size: 18px;
}

[LelyModerator]

Hello Luke,

I did check the content of you Customizer CSS. I found out that you have CSS syntax error for comments.
Please note that comments should be like this:

/* This is a sample CSS comment. It's inside a combination of asterisk and slash */

Your comments have missing asterisk thus CSS after this comments will not work. Update the following lines:

/Custom phone number in menu bar*/
/increase font weight of sub menu items*/
/highlight parent menu item*/
/increase size of portfolio sort fields*/

To this:

/*Custom phone number in menu bar*/
/*increase font weight of sub menu items*/
/*highlight parent menu item*/
/*increase size of portfolio sort fields*/

Hope this helps.

[JacintaParticipant]

Hi Lely,

Ahhhhh yes, you’re right, thank you! it’s working 🙂

However, there seems to be an even bigger issue now… the entire site is broken! No idea what has caused this… would you mind please taking a look? Is there some way to fix it? The site was working fine after all my updates earlier today, but I visited the site tonight only to find it like this. Would really appreciate your help!

[RahulModerator]

Hey There,

Thanks for writing back!

The site is working absolutely fine here. Would you mind providing us with a Screenshot so we can take a closer look of it?

Thanks for understanding!

[JacintaParticipant]

It’s completely jumbled up on desktop and mobile here at my end…. screen shots below:

http://prnt.sc/ekvbyk
http://prnt.sc/ekvdec
http://prnt.sc/ekvdkl

I’ve tried clearing all browsing data but it still looks like this 🙁 . I’ve also tried turning off plugins one at a time… no luck. The site looks like this on all web browsers (chrome, safari, firefox)

Here is a screen shot of the theme section… http://prnt.sc/ekvsx7 could it be something to do with the child theme? Seems like a style sheet problem perhaps? I’m not a web developer so I’m unfamiliar witch back end coding issues… I’m really hoping you can help?

[JacintaParticipant]

Hi again,

I realise there is a time difference (I’m in Australia) and I might not hear back from you before the weekend 🙁

In the meantime I have switched back to the main X theme (instead of x child theme) because the site goes back to normal when I do, so I’m guessing it’s a problem with the child theme itself. Still have no idea how to fix it myself though.

I’m not going to make any changes to the site at all until I hear back from you as I’m worried that any changes might affect the main X theme and therefore create further issues…

I’d really appreciate your help asap though – thanks so much! I’ll stay tuned 🙂

[LelyModerator]

Hi Luke,

Did you figure this out already? I can see that your site is displaying fine and child theme is active as of the moment. Please confirm. See this:http://screencast-o-matic.com/watch/cbebjD6kct

[JacintaParticipant]

Hi Lely,

Apologies, thought I already replied to this. I ended up re-installing the child theme as something was clearly broken with the old one. All good now 🙂

I read the updates re: the new general forum, but since this thread is still active I just have one more question. (sorry if this is the wrong place to put it, just thought it would be easier)

Seems this line of code I used in the custom css area is still not affecting my menu the way I need it to:

/*highlight parent menu item*/

.x-navbar .desktop .x-nav > .current-menu-item > a {
font-weight: bold;
color: #087cc1;
}

What I want is for the selected sub-menu pages’ PARENT MENU item to be highlighted in blue (#087cc1) when that page has been clicked on / active. Currently it defaults to white so there is no way for a visitor to know which menu tab/page they are currently on, unless it’s a parent menu with no sub-menu items. Is there another reason why this code may not be working?

Thanks so much for your help! 🙂

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.current_page_parent > a > span {
    color: #087cc1;
}

Hope that helps.

[JacintaParticipant]

Thanks! That did the trick 🙂

Unfortunately, now something else weird is happening 🙁 If you click on ‘About’ which is the first menu item, then click on ‘Kitchens’ which is the second, the first menu item stays highlighted in blue, as well as the second. Any idea why this would be happening? See screen shot: http://prntscr.com/esjkn3

[Author]

Posts