Change the layout of menu text color background

This tutorial shows how to change the menu layout , color ,background font size etc.
So you can adjust the menu to for example a tablet and make it better visible (larger text).

Here under the structure of the menu (horizontal)and the submenu (vertical): (I made it understandable and have already made some adjustments for my own site)
See: http://www.toonkamer-webshop.nl

Open: stylesheet.css (catalog-view-theme -default-stylesheet-stylesheet.css)


/* MAIN MENU LAY OUT */
#menu {
background: #666666;
height: 37px;
margin-bottom: 0px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 0px 0px #FFFFE4;
-moz-box-shadow: 0px 0px 0px #FFFFE4;
box-shadow: 0px 0px 0px #FFFFE4;
padding: 0px 5px;
}
/* TEXT COLOR AND TEXT SIZE MAIN MENU */
#menu > ul > li > a {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}

/* MAIN MENU MOUSE OVER LAY OUT */
#menu > ul > li:hover > a {
background: #888888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

/* SUB MENU LAY OUT */
#menu > ul > li > div {
display: none;
background: #777777;
position: absolute;
z-index: 5;
padding: 15px;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}

/* TEXT SUBMENU */
#menu > ul > li ul > li > a {
font-size: 18px;
text-decoration: none;
padding: 4px;
margin-bottom: 5px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}

/* SUBMENU MOUSE OVER LAY OUT AND TEXT*/
#menu > ul > li ul > li > a:hover {
font-size: 18px;
color: #FFFFFF;
background: #888888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Change the background color , text color , font size etc to your own whishes and see what happens
http://www.toonkamer-webshop.nl

1 Change text color , tekst size of description and price
http://forum.opencart.com/viewtopic.php ... 67#p610201
2 This tutorial shows how to change the menu layout , color ,background font size etc.
So you can adjust the menu to for example a tablet and make it better visible (larger text).
http://forum.opencart.com/viewtopic.php ... 12#p609626
3 This tutorial shows how to symmetrical line up the array of products on the category page.
For a better balanced block array line up.
http://forum.opencart.com/viewtopic.php ... 96#p603834
4 This tutorial shows how to put the product description price and so on next to the product image on the product page instead of under it.
http://forum.opencart.com/viewtopic.php ... 03#p603505
5 This tutorial shows how you can upload your images much faster than by ADMIN.
http://forum.opencart.com/viewtopic.php ... 38#p603647
6 This tutorial shows how to make a back up of your uploaded images. If by accident a map of images is lost you can easely restore them and do not have to one by one upload the images again.
http://forum.opencart.com/viewtopic.php?f=21&t=162242
7 This tutorial shows how to add text to your home page in different ways
http://forum.opencart.com/viewtopic.php ... 10#p603531
8 This tutotial shows how to remove the colorbox lay-out and leave only the picture.
(click on the picture for more or beside it to go back tot he product page.)
http://forum.opencart.com/viewtopic.php ... 35#p603227
9 Remove white space from Image white borders around images pop-up colorbox
http://forum.opencart.com/viewtopic.php?f=21&t=162244
10 This tutorial shows how to remove certain features you don't use in your shop
remove breadcrumb , remove title , remove image and category description , remove refine search , remove sort by name, date, price , remove compare , remove
http://forum.opencart.com/viewtopic.php ... 05#p603517
11 This tutorial shows how to make different background images on the different pages.
http://forum.opencart.com/viewtopic.php ... 26#p602451
12 Change layout of additional images breadcrumbs small picture
http://forum.opencart.com/viewtopic.php?f=21&t=162874
13 Simple structure of opencart how layout lay-out build up
http://forum.opencart.com/viewtopic.php?f=21&t=162872