Stay theme – change font of one page title in custom menu

jlanglois2014 · Member · May 28, 2014 at 8:00 pm
Copy link

Add topic to favorites
Hi there…is it possible to have different fonts for pages listed in a custom menu in the side widget area of a page? I am using the Stay theme and I have a custom menu for the side widget area of each page, but I want the first-level page listed in these menus to be bolder and perhaps a larger font than the pages underneath it.
I can change the font and weight for the whole menu, but I can’ figure out how to change just one. My site is not public as of yet.

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 2, 2014 at 10:17 am
Copy link
Hi there, you can specifically target the page with the specific page body class and the menu item in the menu widget by its specific ID. As an example, on your Marketing Research page if you look at the source code for that page, in the opening body selector you will find that the unique page body class is page-id-5. The top menu item (Marketing Research) has a CSS id of menu-item-1259. To style that particular menu item, on that particular page differently, you can do the following.
```
.page-id-5 #secondary .menu-item-1259 a {
    color: #FF0000;
    font-style: italic;
    font-size: 150%;
}
```
jlanglois2014 · Member · Jun 2, 2014 at 5:35 pm
Copy link
Thank you, that worked for the Market Research page but I haven’t been able to replicate it for any others.

For instance, I tried the below code for the Direct Marketing page to have the Direct Marketing page title be larger on the custom menu on the Direct Marketing page.

.page-id-7 #secondary .menu-item-759 a {font-size: 14px; }

I also tried the below code to change the font size for the Sample Solutions page title on the Sample Solutions page custom menu…but it increased the size of the whole menu – not just that one title. Maybe the way I set up the menu is impacting this?

Any help is much appreciated.
moxymetals · Member · Jun 3, 2014 at 1:04 pm
Copy link
Hi, I’m also using the stay theme, and in my Customize CSS view my fonts and background colors all show up the way I want them to, and the way they have been. Then, in my actual site view, the font reverts back to basic serif something, and the page is completely black and white. What’s going on? A week ago my site looked correct, now I can’t figure out how to get out of black and white! The blog I need help with is http://www.happenstancejewelrystudio.com
kathrynwp · Staff · Jun 4, 2014 at 10:15 pm
Copy link
moxymetals – it doesn’t look like you’ve purchased the Custom Design upgrade for that site, which is what you need to change colours and fonts. You can buy the upgrade through your dashboard here:

https://happenstancejewelrystudio.wordpress.com/wp-admin/paid-upgrades.php

Just let me know if you need further help with it.
kathrynwp · Staff · Jun 4, 2014 at 10:21 pm
Copy link
jlanglois2014 –

I tried the below code for the Direct Marketing page to have the Direct Marketing page title be larger on the custom menu on the Direct Marketing page.

The Direct Marketing menu item has the class page-item-7, so you can target it on the Direct Marketing page only with this CSS:
```
.page-id-7 .page-item-7 {
	font-size: 150%;
}
```
I found the class by using the Firebug browser inspector for Firefox.
moxymetals · Member · Jun 4, 2014 at 10:55 pm
Copy link
I don’t understand, I purchased the domain and the site about 6 months ago, and the font looked fine until this week. What happened?? Do I need to re-purchase something I bought prior? Why would it suddenly change like that?
kathrynwp · Staff · Jun 5, 2014 at 1:20 pm
Copy link
moxymetals – it looks like your annual WordPress.com Premium package for http://happenstancejewelrystudio.wordpress.com was purchased on May 11, 2013. The auto-renewal did not go through since the transaction was declined. This means that your Premium upgrade expired on May 11, 2014. You can re-purchase it in your dashboard, under Store:
https://happenstancejewelrystudio.wordpress.com/wp-admin/paid-upgrades.php

Your custom CSS should reappear once the upgrade is in place. Just let me know if you have any trouble with it.
jlanglois2014 · Member · Jun 5, 2014 at 8:36 pm
Copy link
Thanks for the coding, but this just made the entire menu on the Direct Marketing page a larger font. I need to adjust the font of the different pages within each page’s side-menu, and their alignment.

For example, a sample side menu (with layout and font) would be :

Market Research (18px)
Sample Solutions (16px)
Listed Samples (14px)

Not sure if that level of customization can be done?
kathrynwp · Staff · Jun 6, 2014 at 1:43 pm
Copy link
Sure, it can be done. There are a couple of steps to accomplish what you want:

1. Identify the ID or class of the HTML element you want to target
2. Add CSS to target the specific element

Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

An Intro to CSS, or How to Make Things Look Like You Like

Intro to CSS: Previewing Changes with the Matched Rule Pane

http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

For example, in your sidebar menu on this page: http://jlangloisblog.wordpress.com/direct-marketing/ – you’d need to target a particular menu item by referencing its unique menu-item ID.

For example, Landline Residential Lists has the unique ID menu-item-1225, which you can then target with CSS by adding a # symbol in front, like this:
```
#menu-item-1225 {
    font-size: 150%;
}
```
Hope this points you in the right direction.
jlanglois2014 · Member · Jun 10, 2014 at 12:47 am
Copy link
Thanks, the links were helpful but not 100% what I needed.

With some of the menu-items I think the issue is that there is a parent-child relationship. I need to be able to change the parent, but not the child.
For example, on the Sample Solutions page, the Market Research menu item is menu-item 617. When I increase the font size for that menu item, it increases the font size of the whole menu (down to Advanced Analytics). I want to just have the text Market Research at the larger font. In essence, I need to be able to isolate each menu element and style it differently. I just cannot seem to find the right selector to make this happen.

For menu items that don’t have any children, I am fine.

Any advice?
thesacredpath · Member · Jun 10, 2014 at 2:10 pm
Copy link
Hi, the submenu items in the custom menu widget are a child of the parent, top level menu item. The following will allow you to adjust the top level menu item font size (Market Research) and then also sets the sub menu items for that parent back to what they were originally.
```
.menu-item-617 {
    font-size: 150%;
}
.menu-item-617 .sub-menu {
    font-size: 13px;
}
```
jlanglois2014 · Member · Jun 10, 2014 at 4:06 pm
Copy link
Perfect! In combination with other coding you have sent me this works really well. Thanks again.
thesacredpath · Member · Jun 10, 2014 at 4:29 pm
Copy link
You are welcome.

No items found.