Adding a custom style to one of your menu items

[dekraan]

Hi all,

I really like the style of the 'My studiopress' link in the menu on this forum and the studiopress website. This list item seems to have a different class for as far as I can tell.

Is there a way to create this effect on one of the genesis child themes (I'm using parallax now)?

[Brad Dalton]

Try this tutorial

---

Tutorials for StudioPress Themes.

[dekraan]

Hi Brad,

Thank you! That looks easy enough to give it a go.

[dekraan]

@braddalton, I tried to get it to work like that, and maybe I can. Might be a matter of tweaking the css. But it seems that studiopress themselves have gotten the hyperlink inside the list item a different class. And not the li-item itself. Is there a trick to do that?

[Brad Dalton]

Yes wp-admin/nav-menus.php screen options > CSS classes

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

That is a bit over my head. Do you mean open the nav_menus.php file through FTP of something and then make an adjustment somewhere?

I think that this adjustment would give me the option to add a CSS class to a link through the dashboard at menu's?

If this is the case, could you help me out some more by letting me know what I need to change in the PHP file?

[Brad Dalton]

Its simple. In the menus page in the WP Dashboard.

---

Tutorials for StudioPress Themes.

[dekraan]

Hi @braddalton,

Thank you for clearing this up. This was the same thing that was in the tutorial by Brian as well?

I took that step and adding a CSS class this way, only adds the class to the unordered list item 'li' and not to the hyperlink within this li.

Am I doing something wrong?

[dekraan]

@braddalton

I think I get it now. Is the way to get there naming the CSS class like you say, something like 'test', and then style the hyperlink by adding '.test a:link'?

[Brad Dalton]

Yeah, all it does is add a class to a menu item and then you can style it.

---

Tutorials for StudioPress Themes.

[dekraan]

@braddalton,

thanks! It seems to work, but only half way...

I am using the studiopress header as an example, to see how it should or could work. But I cannot get the hover to work properly for the last 'button' on my menu. If that is the only thing that does not work...

On hover, the color should turn #000, I added !important to it, and when I investigate it (or try with chrome) it does say the color is black. This is what I added, but it just won't stick.

.testing a:link, a:visited {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 12px 15px 9px;
    margin-left: 10px;
    background: none;
    border: 1px solid #fff;
    color: #fff;
}

.testing a:hover {
    border-color: #fff;
    background-color: #fff;
    color: #000 !important;
}

.testing a:active {
    background-color: #fff;
    border-color: #fff;
    color: #fff;
}

Would you mind taking a look at my source code? My site is
here.

[dekraan]

@braddalton,

thank you very much!

Not everything seems to work though...

I am using some studiopress header code to see how it should or could work. But I cannot get the hover to work properly for the last 'button' on my menu.

This is the code I added, but the color on hover does not work...

.testing a:link, a:visited {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 12px 15px 9px;
    margin-left: 10px;
    background: none;
    border: 1px solid #fff;
    color: #fff;
}

.testing a:hover {
    border-color: #fff;
    background-color: #fff;
    color: #000 !important;
}

.testing a:active {
    background-color: #fff;
    border-color: #fff;
    color: #fff;
}

Would you mind taking a look at my source code to see what is going wrong? My site is
here.

[dekraan]

Hi @braddalton,

thank you very much!

Not everything seems to work though...

I am using some studiopress header code to see how it should or could work. But I cannot get the hover to work properly for the last 'button' on my menu.

Since the background goes white, I want the font to go black. But adding this to the hover css, does not seem to do anything.

Would you mind taking a look at my source code to see what is going wrong? My site is
here.

[dekraan]

This reply has been marked as private.

[Brad Dalton]

Link to your site please.

---

Tutorials for StudioPress Themes.

[dekraan]

This reply has been marked as private.

[dekraan]

This reply has been marked as private.

[Author]

Posts