Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a custom style to one of your menu items
- This topic has 16 replies, 2 voices, and was last updated 7 years, 1 month ago by dekraan.
-
AuthorPosts
-
March 18, 2017 at 7:27 am #203297dekraanParticipant
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)?
March 18, 2017 at 7:31 am #203298March 18, 2017 at 8:20 am #203306dekraanParticipantHi Brad,
Thank you! That looks easy enough to give it a go.
March 18, 2017 at 12:31 pm #203341dekraanParticipant@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?
March 18, 2017 at 12:43 pm #203342Brad DaltonParticipantMarch 18, 2017 at 1:01 pm #203343dekraanParticipantHi @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?
March 18, 2017 at 1:04 pm #203344Brad DaltonParticipantMarch 18, 2017 at 1:23 pm #203345dekraanParticipantHi @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?
March 18, 2017 at 1:57 pm #203347dekraanParticipantI 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'?
March 18, 2017 at 2:02 pm #203348Brad DaltonParticipantYeah, all it does is add a class to a menu item and then you can style it.
March 18, 2017 at 3:32 pm #203356dekraanParticipantthanks! 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.March 18, 2017 at 3:36 pm #203359dekraanParticipantthank 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.March 18, 2017 at 3:39 pm #203360dekraanParticipantHi @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.March 18, 2017 at 3:45 pm #203363dekraanParticipantThis reply has been marked as private.March 19, 2017 at 12:11 am #203374Brad DaltonParticipantMarch 19, 2017 at 1:02 am #203375dekraanParticipantThis reply has been marked as private.March 20, 2017 at 1:38 am #203428dekraanParticipantThis reply has been marked as private. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.