Menu item's css is not working

[vks_group]

Hey,
I’ve set a menu for my site all the things are good but I want to add a specific class for a specific element of the menu item’s. I tried by adding my css with the element’s ID, but it didn’t work. I tried in some other ways too but idn’t work. Please let me know how to add that css or how to customize that element.

you can see in above image I want to apply the css for that selected element. But not able to get it done. I’m adding the credentials in secure note if you need it.

[marc_a]

Hey Ketan,

Thanks for reaching out!

You can use the pseudo-CSS to target that element. In your Navigation inline element, you can add this CSS code inside the element CSS.

$el li:last-child a{
 //your CSS code here
}

That CSS selector will target the last items of your menus. To know more about pseudo-CSS, you can check this one.

• https://www.w3schools.com/css/css_pseudo_classes.asp

Hope that helps.

[vks_group]

Hey @marc_a
Thanks for your help. Using the Psuedo-CSS to target the element it worked but not as I want. What
$el li:last-child a{
//your CSS code here
}
the above code did is it applied the css to all the last elemnts of all the li tags which are present in the header whereas I want that particular button to be designed specifically.
please see in the below image what the above code has done.

Whereas I just need to design that “Sign In / Register” button which is just near to “Place an order” link.
Code which I added in the custom code section of header layout is shown below.

[tristup]

Hi Ketan,

I have checked and found that you have already added the signin class through the Menu Item > CSS Class. You can add this class while implementing the CSS code and your code looks like the following.

li.signin a {
    //your CSS code
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[vks_group]

@tristup

li.signin a {
    //your CSS code
}

i want to change the color of the text of the sign in button so please give me the css class that target the anchor text.

[marc_a]

Hey Ketan,

You can use this CSS selector to target the text.

li.signin a .x-anchor-text-primary {
	//your CSS code here
}

On the other hand, I want to let you know that the reason why my code in the previous response is not targeting the correct item is that you’ve added the custom CSS inside the header CSS. It should be inside the Navigation Inline element CSS.

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Thank you.