Styling a Menu

The default styling of the top right primary menu looks like this:

Beans-default-styling-menu

 

To style the menu we need to figure out the CSS that is attached to each element that we need to style. Go to the frontend and right click the menu. Select Inspect (Element) to see the HTML and CSS.

 

Beans-Inspect-Chrome-menu

 

Moving the cursor through the html highlights areas of the web site element above it.
One can also click into the CSS and add additional tags, or change the existing options. It is a good way to see live adjustments on the web page. It is all temporary and when you refresh the page these adjustments go away, so when you add or adjust the CSS to your liking select what you want to copy and then copy the code into your style.css.

I will style it first and then show some of the CSS that shows up in the browser Inspect properties.
Btw here is a CSS tutorial I have written that will also help: easywebdesigntutorials.com/customize-css-to-style-your-site

 

 

/*------ Styling the top right Primary Menu --- ---*/

/* Styling all menus: .uk-navbar-nav or .uk-navbar-nav > li */
/* Primary menu - default top right of logo*/
 .tm-primary-menu {
    font-size: 16px;
    height: 40px; 
    border: 1px solid #333; 
    background: yellow; 
 }
 
/* Styling all menus: .uk-navbar-nav>li>a */
 /* Each menu item */
 .tm-primary-menu .menu-item > a {
     color: dark blue;  
     font-size: 18px;
     height: 40px;
     background: none;
 }

/* Styling all menus: .uk-navbar-nav > li > a:hover */
/* Hover effect */
 .tm-primary-menu .menu-item > a:hover {
     background: none;
     color: pink;  
 }

/* NB!! 
Clicking a menu link shows a white background square. To adjust this add the following code. */
.uk-navbar-nav > li:hover > a, 
.uk-navbar-nav > li > a:focus, 
.uk-navbar-nav > li.uk-open > a,
.uk-navbar-nav > li > a:active,
.uk-navbar-nav > li.uk-active > a,
.uk-nav-dropdown > li > a:hover, 
.uk-nav-dropdown > li > a:focus, {
    background-color: transparent !important;
    color: #cc0000;
}

/* Styling all menus: .uk-navbar-nav>li.uk-active>a */
/* Current page */   
.tm-primary-menu .current-menu-item > a { 
   background: none; 
   color: lime; 
}

 

 

Beans-styling-menu

 

/* Sub menu */

/* .uk-navbar-nav
Hover over link changes connected sub menu. */ 
.tm-primary-menu ul ul li:hover a { 
background-color: transparent !important; 
}

/* Adjusting the default white space above and below the submenu. */
.uk-dropdown-navbar {
background: green;
padding-top: 5px;
}

/* .uk-dropdown-navbar or .uk-open>.uk-dropdown
Styling all drop down menus: */
.tm-primary-menu .menu-item ul {
border-radius: 3px;
color: #000;
background: green;
}

/* Sub menu hover each menu item*/
/* Styling all drop down menus: .uk-dropdown .uk-nav a:hover */
.tm-primary-menu .menu-item li>a:hover {
margin: 0;
text-decoration: underline;
background-color: brown;
}

/* Sub-sub menu items */
/* Styling all drop down menus use: .uk-nav-dropdown ul a */
.uk-nav-dropdown ul a {
background: yellow;
color: pink;
}

 

Beans-styling-menu-sub

 

That gives an overview of styling a menu using the Beans framework. Something similar should work for most CSS menus.

 

A tip on using Chrome Dev Tools.

It is difficult to pinpoint some of the CSS. Right click the item in your browser window. Open Inspect. Here is an example from Chrome.

I first found the my-account page in the HTML area. Then on the right side clicked the :hov text and then selected the :focus check box. The CSS code I wanted to adjust was now visible just below the :focus.

I took the cursor up to the Cart drop down and could see the My account button was now blue as the focus was turned on.

The code I wanted to adjust was the
.uk-nav-dropdown > li > a:hover,
.uk-nav-dropdown > li > a:focus
I wanted to remove the blue background color. So I added the background-color: transparent !important;
The blue was now removed. I added the code to a bunch of other similar code which can be seen further above on this page.

Dev-Tools-Chrome-Inspect-web-page

 

Other styling examples

 

Beans-stabekk-menu

 

/* ----- Primary menu ----*/

.tm-primary-menu {
font-size: 16px;
height: 40px; 
border: 1px solid #333; 
border: 0;

margin: 40px 0 0 40px;
float: left;
}

/* Each menu item */
.tm-primary-menu .menu-item > a, 
.uk-nav-side > li > a {
color: #fff; /*#d9cb9e */
font-size: 18px;
height: 40px;
background: none;
}

/* Hover effect */
.tm-primary-menu .menu-item > a:hover,
.uk-nav-side .menu-item > a:hover {
background: none;
color: #c02130; 
}

/* NB!! 
Clicking a menu link shows a white background square. To adjust this add the following code. */
.uk-nav-dropdown > li > a:hover, 
.uk-nav-dropdown > li > a:focus,
.uk-navbar-nav > li:hover > a, 
.uk-navbar-nav > li > a:focus, 
.uk-navbar-nav > li.uk-open > a,
.uk-navbar-nav > li > a:active,
.uk-navbar-nav > li.uk-active > a {
background-color: transparent !important;
color: white;
}


/* Current page */
 /* Styling all menus: .uk-navbar-nav>li.uk-active>a */
.tm-primary-menu, .current-menu-item > a {
background: none !important;
color: #c02130 !important;
}

/* Sub menu */

/* Adjusting the default space above and below the submenu. */
.uk-dropdown-navbar {
background: #000;
margin-top: 15px;
padding-top: 25px;
}

/* Sub menu each menu item. */
.tm-primary-menu .menu-item li > a,
.uk-nav-side .menu-item li > a {
margin: 0;
color: #fff;
}

/* Sub menu hover each menu item*/
/* Styling all drop down menus: .uk-dropdown .uk-nav a:hover */
.tm-primary-menu .menu-item li>a:hover,
.uk-nav-side .menu-item li>a:hover {
margin: 0;
color: #c02130;
}

/* Footer menu */
/* Open submenu might show another menu item color. */
.uk-nav-side ul a {
color: #fff;
overflow: visible !important;
}

/* ---- MENU END ---*/

 

 

Beans-osf-menu

/* Top menu */
.tm-primary-menu {
margin: -15px 0 0 40px !important;
}

/*.tm-primary-menu a:hover{
color: #fff !important;
background-color: #665e5e !important;
}
*/

.tm-primary-menu .current-menu-item a {
color: #fff !important;
background-color: #665e5e !important;
}

/* I had to remove the background rectangle box that showed up when clicking the links. I inserted the background color of the menu to remove it. */
.uk-nav-dropdown > li > a:hover, 
.uk-nav-dropdown > li > a:focus, 
.uk-navbar-nav > li:hover > a, 
.uk-navbar-nav > li > a:focus, 
.uk-navbar-nav > li.uk-open > a, 
.uk-navbar-nav > li > a:active, 
.uk-navbar-nav > li.uk-active > a {
   background-color: rgba(102, 94, 94, 0) !important;
   color: #fff;
}

 

Beans-red-menu

 

 

/* Does not push the content when offcanvas menu opens */
.uk-offcanvas-page {
    margin-left: 0 !important; /* Important is necessary since it overwrites CSS added via JS */
}

/* Primary menu - default top right of logo*/
.tm-primary-menu {
 font-size: 16px;
 background: #670222;
 width: 100%; /* Remove width to move the menu up beside the logo. */
 height: 40px;
 /*border: 1px solid #333; */
 padding-left: 7%;	
}

.uk-navbar-nav > li {
  margin-left: 40px;
 }

/* Menu items */
.tm-primary-menu .menu-item > a {
color: #fff;
font-size: 18px;
height: 40px;
}

/* Hover effect */
.tm-primary-menu .menu-item > a:hover {
text-shadow: 0 -1px 0 #000;
background: none;
color: #48d3fb;
}

/* Current page */
.tm-primary-menu .current-menu-item > a{
background: #fff !important;
} 

/* Sub menu */

.tm-primary-menu .menu-item ul {
border-radius: 3px;
color: #000;
}

/* Sub menu hover */
.tm-primary-menu .menu-item li {
margin: 0;
}

/* Hover over a submenu child item and the parent is also active */
.tm-primary-menu .menu-item li:hover > a {
color: #48d3fb;
margin: 0;
}

.tm-primary-menu .uk-dropdown-navbar {
margin-top: 0;
border-bottom-right-radius: 30px;
background: #670222;
/* color: #444; */
}

 

 

Beans-button-menu

 

/* ------ Styling all menus ----*/

/* ID menu = #menu-main-menu
Class = .tm-primary-menu

ul = all menus
ul ul = sub menu
ul ul ul = sub sub menu
ul = goes one down in the sub menu

#menu-main-menu ul ul { - removes sub menu number 2
display: none;
}

#menu-main-menu ul ul { - removes sub menu number 2
display: none;
}

*/

/* The full menu */
.tm-primary-menu,
#menu-main-menu {
background: #fff;
width: auto;
padding: 15px 0 15px 20px;
margin: auto;
}

/* Each menu item */
.tm-primary-menu .menu-item > a,
#menu-main-menu .menu-item > a {
background: #f0eee7;
background-image: -webkit-linear-gradient(top, #f0eee7, #d6ad33);
background-image: -moz-linear-gradient(top, #f0eee7, #d6ad33);
background-image: -ms-linear-gradient(top, #f0eee7, #d6ad33);
background-image: -o-linear-gradient(top, #f0eee7, #d6ad33);
background-image: linear-gradient(to bottom, #f0eee7, #d6ad33);
-webkit-border-radius: 22;
-moz-border-radius: 22;
border-radius: 22px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: times;
color: #6b571c;
font-size: 16px;
padding: 1px 10px 1px 10px;
margin: 5px;
border: solid #999b9c 1px;
text-decoration: none;

/* Affects the buttons. */
line-height: 32px;
height: 32px;

}

/* Hover */
.tm-primary-menu .menu-item > a:hover,
#menu-main-menu .menu-item > a:hover {
background: #e6e3d8;
background-image: -webkit-linear-gradient(top, #e6e3d8, #e6b11e);
background-image: -moz-linear-gradient(top, #e6e3d8, #e6b11e);
background-image: -ms-linear-gradient(top, #e6e3d8, #e6b11e);
background-image: -o-linear-gradient(top, #e6e3d8, #e6b11e);
background-image: linear-gradient(to bottom, #e6e3d8, #e6b11e);
color: #d152fc;
}

/* Current page */
.tm-primary-menu .current-menu-item > a,
#menu-main-menu .current-menu-item > a {
color: purple;
}

/* SUB MENU */

/* Hover: Effects all the items in the same sub menu area and bottom submenu link. REMOVED FOR NOW
.tm-primary-menu ul ul li:hover a,
#menu-main-menu ul ul li:hover a {
color: black;
background: #e6e3d8;
}
*/

/* Adjusting the default white space above and below the submenu. */
.uk-dropdown-navbar {
background: #fff;
padding-top: 5px;
width: 230px;
border-radius: 10px;
background-image: none;
box-shadow: none;
}

#menu-main-menu .menu-item ul a {
color: #6b571c;
border-radius: 0;
border: 0px solid #333;
margin: 0;

/* Bigger sub menu links. */
padding-top: 11px;
line-height: 1.1;
height: 35px;
}

#menu-main-menu .menu-item > ul > li > a:hover {
margin: 0;
border: 0px solid #333;
}

/* ---- MENU end ---- */

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website