In Toolbox » Menu Manager article, we talked about Editing Options For Menu Links. In this article we will be giving examples on how you can style your menu items and more.


How Can I Access These Options?


Once you are in a "Edit" view for specific menu, you will find additional "Edit" button attach to every menu link:





Clicking on this will give you additional options for editing:





Format To Use


In this section, you are basically putting the HTML code together for this link to display.


This is how the HTML looks like on the "Inspect" mode, before putting any information on these sections:





As it can be seen above, only information has been displayed is the /home URL and Home text, which we input these on the menu links previously.


Now we will be filling the additional settings one-by-one and see the difference.


Meta Title Text


This setting can be used to add additional SEO boost to your link, by stating its "Title"


My Input:





Front-end and HTML view:





Here is an article from w3schools, talks about this attribute:


HTML title Attribute


Link / Text Link CSS Class 


This setting can be used to add preferred CSS Class to the <a> element.


My Input:





Front-end and HTML view:






<li> CSS Class 



This setting can be used to add preferred CSS Class to the <li> element.


My Input:





Front-end and HTML view:





Link / Text Inline Style Attribute 


This setting can be used to add preferred style elements to the <a> element.


Before starting this example, I removed the "Disabled" class from <li> element and added "btn btn-lg btn-success" class for all the other menu links, this is how it looks on the front end:





My Inputs:





Front-end and HTML view:





<li> Inline Style Attribute 


This setting can be used to add preferred style elements to the <li> element.


My Input:





Front-end and HTML view:





Add no-follow


This setting will indicate if search engines should follow this link or not. This setting can be used when the respected link is not ready yet (might be a staging mode).


My Input:





Front-end and HTML view:







Open in new window


This settings will indicate if the link should open in a new tab or not.


My Input:





Front-end and HTML view: