This article demonstrates how to create a menu item with a coloured background and an image.  The finished menu item appears under the Demonstrations menu above.

The menu item is created using an image, a little bit of CSS added to your custom CSS files and a small adjustment to a setting on the menu item itself.

What you will need

The image

You will need an image.  For the purposes of this demonstration, I am using the image that you can download from this website that looks like this:

Upload the image and save it as ../images/longhorn.png.  You will notice that the above image has a transparent background and edges of the “longhorn steer” shape are a kind of red colour.  When you‘re choosing the background colour for the “box” that we‘ll be using later, try to choose a colour that doesn't clash with the image.  In this example, we‘ll be choosing the colour for the background as #B30B12.  If we display the above image against this colour it looks like this:

The CSS

Add the following lines to the end of your custom CSS file:

/* CSS for menu item class with image */

.cmcItem {
background-color: #B30B12;
color: #fff;
font-weight: 600;
padding: 0 10px 2px 0;
border-radius: 6px;
box-shadow: 1px 1px 4px #444;
border-bottom: #A30A06 solid 1.5px;
border-top: #CF686D solid 1.5px;
text-decoration: none !important;
font-weight: unset !important;
}
.cmcItem:before {
background-image: url('/images/longhorn.png'); /* or use some other image */
content: '\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0'; /* these are just non-breaking spaces */
background-size: 75%; /* this resizes the image */
background-repeat: no-repeat;
background-position: 20% 80%;
margin-right: -6px;
}
.cmcItem:hover, .cmcItem:focus {
border-top: #A30A06 solid 1.5px;
border-bottom: #CF686D solid 1.5px;
color: #eee !important;
background-color: #930a0e;
transition-duration: 2s;
box-shadow: 0.5px 0.5px 4px #444;
}

Using the new style with your menu items

Edit your menu item (see the screeshot below) on the Link Type tab and use cmcItem as the Link Class.

Screenshot of menu item [CSS] class

 While there may be other ways of styling a menu item, we can also use this method anywhere:  for example Back to the top of this page

 

No comments

Comments are closed

The comments for this content have been closed automatically; it's been a while since it was published.