Turning the last item on my navigation menu into a button (I am using version 7.0 Five template).

Hi there. I been given the following CSS code to turn the last item on my navigation menu into a button (I am using version 7.0 Five template). The code works well for the navigation button but unfortunately also turns the last button in the drop down menu to a button, which I don't want. I was hoping someone could assist with the tweak I need to make to the code to amend this please? 

Code below:

#main-navigation ul li:last-child a,
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation ul li:last-child a:hover,
#main-navigation ul li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}
 

1 hour ago, JNoons said:

Hi there. I been given the following CSS code to turn the last item on my navigation menu into a button (I am using version 7.0 Five template). The code works well for the navigation button but unfortunately also turns the last button in the drop down menu to a button, which I don't want. I was hoping someone could assist with the tweak I need to make to the code to amend this please? 

Code below:

#main-navigation ul li:last-child a,
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation ul li:last-child a:hover,
#main-navigation ul li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}
 

Can you share the website link.

Hi Agha,

I am only just building the site and it isn't published yet.... 

2 hours ago, JNoons said:

Hi there. I been given the following CSS code to turn the last item on my navigation menu into a button (I am using version 7.0 Five template). The code works well for the navigation button but unfortunately also turns the last button in the drop down menu to a button, which I don't want. I was hoping someone could assist with the tweak I need to make to the code to amend this please? 

Code below:

#main-navigation ul li:last-child a,
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation ul li:last-child a:hover,
#main-navigation ul li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}
 

target the direct child only

#main-navigation > ul > li:last-child a
{
 background-color: #e18c05 !important;
 color: #ffff !important;
 padding: 13px !important;
 -moz-border-radius: 5px !important;
 -webkit-border-radius: 5px !important;
 border-radius: 5px !important;
 -moz-transition: all 150ms linear !important;
 -webkit-transition: all 150ms linear !important;
 -o-transition: all 150ms linear !important;
 transition: all 150ms linear !important;
}
#main-navigation > ul > li:last-child a:hover,
#main-navigation > ul > li:last-child a:focus,
{
 background-color: #EDBA69 !important; /* match social nav links */
 color: #000000 !important;
}

Thank you so much for your response. I am not very familiar with code and so not sure how to go about targeting the direct child only. The link is 'Donate Now' and it is the last item next to the navigation menu. Are you able to advise how exactly I change the code to target the direct link please? Sorry to ask what is probably a silly question... Thanks so much.

1 minute ago, JNoons said:

Thank you so much for your response. I am not very familiar with code and so not sure how to go about targeting the direct child only. The link is 'Donate Now' and it is the last item next to the navigation menu. Are you able to advise how exactly I change the code to target the direct link please? Sorry to ask what is probably a silly question... Thanks so much.

Since you not provide the url I tested the modified code with five template demo, and it work with any last menu on the header. The selector "> ul > li" is used to select the direct child

Thank you so much! Your support is much appreciated.

I'm also having trouble making my last item on my nav into a button, i've copied different codes from multiple sources including this one and nothing seems to be making the item turn into a button of any sort.

This is the website: https://www.danceathaven.com/

I want to turn the "PARENT PORTAL" into a button that acts/looks like the "Register Here" button or just has a box around it like the register here button. Is there a specific code that could help me?

On 8/5/2023 at 9:25 AM, HavenDance_23 said:

I'm also having trouble making my last item on my nav into a button, i've copied different codes from multiple sources including this one and nothing seems to be making the item turn into a button of any sort.

This is the website: https://www.danceathaven.com/

I want to turn the "PARENT PORTAL" into a button that acts/looks like the "Register Here" button or just has a box around it like the register here button. Is there a specific code that could help me?

Use this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)

div.header-nav-item:last-child>a {
    color: var(--primaryButtonTextColor);
    background-color: var(--primaryButtonBackgroundColor);
    border-color: var(--primaryButtonTextColor);
    padding: 0.2em 1em !important;
    border-radius: 18px;
}
header#header nav {
    flex-wrap: nowrap;
    align-items: center;
}