Header and Footer Edit

Hello,

In the header, I have a menu item named “Register.” Is there a way with additional css code that I can change the font color of this one menu item, and maybe create a border around it or make it bold?

Go to Appearance → Menus section, select your header menu, make sure that CSS Classes checkbox is checked in Screen Options (top right corner), expand your Register menu item and add header-menu-button into CSS Classes (optional) input field. Then add this CSS code in Customize → Additional CSS section:

.header-menu-button {
    border: 2px solid red;
    background-color: green;
    font-weight: bold;
}

You can use any other colors or color codes.

Please create a new topic for your footer issue in order to make it easier to help you.

Kind Regards, Roman.

Thank you so much for the response. This has been a great help! Is there a code I can use to change the color of the font itself to white for instance? Also, is there a piece of code that I can use to decrease the height of the border (or even just the background-color) around the register menu item? At the moment, it’s a bit too far apart. You can view the current state of the button on the website link: https://www.thecollegexchange.com. I’ll be sure to make another topic for the footer.

Sure, try to use this CSS code instead:

.header-menu-button a {
    border: 5px solid yellow;
    background-color: black;
    font-weight: bolder;
    padding: 5px 10px;
    color: white;
}

Kind Regards, Roman.

Beautiful piece of code! I was able to add “border-radius” to curve the edges as well! Another question, is there a way that I can get rid of the hover over color for only this register button? The hover over color for the other menu items are a transparent grey, and I want to keep that for them. But since the “register” item already has a bubble around it, it would be great if its hover color went away.

Hello,

Another question, is there a way that I can get rid of the hover over color for only this register button?

Sure, try to add this CSS code as well:

#masthead .header-menu-button:hover {
    background-color: transparent;
    padding: 30px 10px;
}

Kind Regards, Roman.

This did exactly what I was looking for! Perfect, thanks again Roman!

You are welcome! ??

Kind Regards, Roman.