Add title within a custom menu and add a container around widget

Hi LaTorri

Thanks for reaching out.

We’d need specifics to try assist further. What would you like to change about the formatting of the first menu option? Are you referring to the parent menu item with drop down items below it?

Sure, you could use CSS to put a container around a menu. We’d need to see the site and know what color and how thick you want the border to be.

Thanks. The forum isn’t able to accept images via email. Please, upload your image to any public location and insert the link here. We’ll take a look:)

Sure. Add the following to Appearance > Custom CSS:

/* Custom Menu Widget */

.widget_nav_menu {
	border: 2px solid #ccc;
  padding: 25px;
}

.widget_nav_menu ul {
	list-style: none;
  margin: 0;
  padding: 0;
}

.widget_nav_menu ul li {
  line-height: 2;
  margin: 0;
	padding: 0;
}

.widget_nav_menu ul li a {
	text-decoration: none;
}

Edit as required.

2. These styles are global. To make them row specific you can:

a. Edit the row the menu widget is in, click Attributes on the right, enter the following into the first field, the Row Class field:

boxed

b. Change your CSS as follows:

/* Custom Menu Widget */

.boxed .widget_nav_menu {
	border: 2px solid #ccc;
  padding: 25px;
}

.boxed .widget_nav_menu ul {
	list-style: none;
  margin: 0;
  padding: 0;
}

.boxed .widget_nav_menu ul li {
  line-height: 2;
  margin: 0;
	padding: 0;
}

.boxed .widget_nav_menu ul li a {
	text-decoration: none;
}

Sure, try adding something like:

.boxed .widget_nav_menu li:first-of-type a:hover {
color: #000;
}

Set the color in the new rule as required.

The snippet I sent was intended for Appearance > Custom CSS.

If you want your custom menu widget CSS to be global, use the following:

/* Custom Menu Widget */

.widget_nav_menu {
	border: 2px solid #ccc;
	padding: 25px;
}

.widget_nav_menu ul {
	list-style: none;
  	margin: 0;
	padding: 0;
}

.widget_nav_menu ul li {
	line-height: 2;
	margin: 0;
	padding: 0;
}

.widget_nav_menu ul li a {
	text-decoration: none;
}

.widget_nav_menu li:first-of-type a:hover {
	color: #000;
}

If you’re using the above, without the “boxed” class, then you don’t need to insert the boxed class name in row settings.

The last value above refers to the first menu item.

Thanks for your feedback. I’d need to see this live to properly assist further.

Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

Try:

.widget_nav_menu ul li:first-of-type a {
	pointer-events: none;
}

.widget_nav_menu ul li:first-of-type > a {
	background: none;
	color: #00053e;
}

At the bottom of your Custom CSS.

Hi :)

There is an error in your Custom CSS:

/*.widget_nav_menu li:first-of-type a:hover {
	color: #000;
}

/* is a start of a comment, but there is no close meaning that your last two rules won’t render.

Please, remove the entire contents of Custom CSS and insert the following:

/* Custom Menu Widget */

.widget_nav_menu {
	background-color: #e1e7ed;
	border: 2px solid #00053e;
  	padding: 25px;
}

.widget_nav_menu ul {
	list-style: none;
  	margin: 0;
  	padding: 0;
}

.widget_nav_menu ul li {
	border-bottom: 1px dotted #00053e;
  	line-height: 2;
 	margin: 0;
 	padding: 0;
}


.widget_nav_menu ul li a {
	color: #00053e;
	font-weight: bold;
	text-decoration: none;	
}

.widget_nav_menu ul li:hover > a {
 	background: #ffdd00; 
	color: #fff; 
}

.widget_nav_menu ul li:first-of-type > a {
	pointer-events: none;
}

.widget_nav_menu ul li:first-of-type:hover > a {
	background: none;
	color: #00053e;
}

Super :) Glad we were able to help!

Cheers for now.