Adding custom item to menu

Hello,

I want to add a specially stylized link to the main navigation menu.

See my webpage: scriptdbox.com – on the right there is a blue “Join Now” link I’ve added to the menu.

I add this code to the header.php file:

<nav class="header-navigation">
					<?php
						wp_nav_menu( array(
							'theme_location'  => 'primary-menu',
							'menu'            => '',
							'container'       => false,
							'menu_class'      => 'clearfix',
							'menu_id'         => '',

						) );
					?>
<a class="button primary1" href="/enroll" data-reactid="85">Join Now</a>
					</nav>

And I’ve used this CSS in the custom CSS:

a.button.primary1, button.primary1 {
    color: #ffffff;
    background-color: #11afe2;
  position: relative;
    left: 500px;
    top: -42px;

}

It looks/works great. However, if I resize the browser this link isn’t responsive – it stays fixed and you can’t see it if you have a smaller browser.

How can I implement this so it is responsive?

Thanks so much!

Hey there,
Hope you’re doing well today

I’m not seeing the link from my end, instead, I’m just seeing the regular menu.

I think the best way to do this would be to add the page in the regular menu and then style the menu item using CSS.
If you’d like to style the Join Us menu item then you could just let me know what you’d like to see and I’ll do my best to provide the necessary CSS.

I look forward to your reply :slight_smile:

Best Regards,
Support

I just want that specific menu item to stand out with a different color background than the rest. Thanks so much!

Hi there,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

li#menu-item-177 {
border: 1px solid #11afe2;
padding-left: 5px;
padding-right: 5px;
border-radius: 4px;
background-color: #11afe2;
}

That should give the buttons a bit of a highlight. You may change the color of the border and background to whatever you’d like.

I hope this helps :slight_smile:

Best Regards,
Support

Thanks so much that worked perfectly.

I tried to change the color of the text using:

color: #ffffff!important;

but it wouldn’t change. Any suggestions?

Hi there,
Thanks for keeping in touch with us.

The CSS below should work:

#header .top-header .header-navigation ul #menu-item-180 a:hover {
    color: #ffffff!important;
}

Best Regards,
Support

That works on hover, but I want it to be white all the time.

Nevermind I fixed it by removing “hover” – thanks for your help!!

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support