Header Button Issue

[esltuition]

I have added some code to my website to change the register now option to a button but two buttons are highlighted (see below pic). Please can someone help me fix? I just want the header option Register Now to be a button.

.header .header__inline-menu .list-menu > li:last-child > a {
background: #00c178;
border-radius: 40px;
text-decoration: none !important;
padding-left: 20px;
padding-right: 20px;
color: #fff!important;
}

.header .header__inline-menu .list-menu > li:last-child > a span {
text-decoration: none;
color: #000000;
}

body .header__inline-menu .list-menu > li:last-child > a:hover {
background: #bdffb7;
}

.menu-drawer__navigation .menu-drawer__menu > li:last-child {
padding: 0rem;
}

.menu-drawer__navigation .menu-drawer__menu > li:last-child a {
background: #00c178;
border-radius: 40px;
color: #fff!important;
justify-content: center;
display: inline-block; /* Added to make the button display as block element /
padding: 10px 20px; / Added padding to make the button look more clickable /
text-decoration: none; / Remove underline /
font-weight: bold; / Make the text bold */
}
body .header__inline-menu {
display: block;
}
@media screen and (min-width: 990px) {
body .header–middle-left {
grid-template-columns: auto 1fr;
}
body .header__inline-menu .list-menu–inline{
min-width: 100%;
}
body .header__inline-menu .list-menu–inline > li:last-child {
margin-left: 10;
}
}
@media screen and (max-width: 989px) {
body .header__inline-menu .list-menu–inline > li {
display: none;
}
body .header__inline-menu .list-menu–inline > li:last-child {
display: block;
}
body .header {
grid-template-areas: “left-icons heading navigation icons”;
grid-template-columns: 1fr 2fr;
}
body #menu-drawer .menu-drawer__navigation .menu-drawer__menu > li:last-child {
display: none;
}
}

[Liquid_xPert_SJ]

@esltuition

please use below code and update your above code accordingly.

.list-menu.list-menu--inline li:last-child a span {
	color: white;
background-color:green;

}

thanks

[esltuition]

Thank you for the response but the ‘ESL English Communication’ option is still a button. I would like to remove this as a button and have it the same as the option above ‘ESL Young Learners English Courses’

[Liquid_xPert_SJ]

please share the store url

[esltuition]

Thank you. www.esltuition.com pass: mcfc

[Liquid_xPert_SJ]

please update this code and remove the old one you have in the base.css file.

[Liquid_xPert_SJ]

[esltuition]

Legend!! This has worked thank you very much!

Would you know what code we need to add to get this feature added to the mobile view?

[Liquid_xPert_SJ]

yes sure let me code it for you

[Liquid_xPert_SJ]

@esltuition

.menu-drawer__menu.has-submenu.list-menu > li:last-child > a {
	background: #00c178;
		border-radius: 40px;
		text-decoration: none !important;
		padding-left: 20px;
		padding-right: 20px;
		color: #fff !important;
}
.menu-drawer__menu.has-submenu.list-menu > li:last-child:hover > a {
	background: #bdffb7;
	color: #000 !important;
}

i guess this will work for you

[esltuition]

Thanks again for the response but this doesn’t seem to have worked

[Liquid_xPert_SJ]

you can check this i have used the same code