Adding a CSS menu onto every page

**commdiver** · 17 Dec 2010, 04:09 PM

I created a CSS menu and would like to add it to every one of my pages. Is there a way to do this, other than entering the HTML into every page?

Thank you in advance for any help.

**CoolCarPartsOnline** · 17 Dec 2010, 05:56 PM

Everything is possible if you provide enough information on what exactly you want to do.

**commdiver** · 17 Dec 2010, 07:44 PM

Originally Posted by CoolCarPartsOnline

Everything is possible if you provide enough information on what exactly you want to do.

Ok, sorry about that.

My website is QueenCharlotteSoaps.com. I would like to add a CSS menu below my logo on every page (moving the nav bar and stuff is planned too, but that is not the problem now).

Below is my CSS and HTML. Please let me know if you need any more information. Thank you!

Code:

#cssmenu {
   float:left;
   width:100%;
   background:#600000;
   overflow:hidden;
   position:relative;
}
#cssmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#cssmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#cssmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#6000000;
   color:#FFFFFF;
   text-decoration:none;
   line-height:1.3em;
}
#cssmenu ul li a:hover {
   background:#369;
   color:#6000000;
}

Code:

<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>

<body>

<div id="cssmenu">
   <ul>
      <li><a href="http://www.queencharlottesoaps.com">Home</a></li>
      <li><a href="http://queencharlottesoaps.com/index.php?main_page=account">My Account</a></li>
      <li><a href="http://queencharlottesoaps.com/index.php?main_page=contact_us">Contact Us</a></li>
      <li><a href="http://queencharlottesoaps.com/index.php?main_page=page&id=5">Wet Shaving Information</a></li>
   </ul>
</div>


</body>
</html>

**CoolCarPartsOnline** · 18 Dec 2010, 05:22 AM

You can add the html portion to you template folder...look under your_template/common/tpl_header.php. Place the Menu code where you wanted displayed (right at the end of the header file).

Then you can place the css code in your general stylesheet.

This would make the menu visible throughout the website.

Some testing my be needed to get the effect needed.

**commdiver** · 18 Dec 2010, 11:47 PM

Originally Posted by CoolCarPartsOnline

You can add the html portion to you template folder...look under your_template/common/tpl_header.php. Place the Menu code where you wanted displayed (right at the end of the header file).

Then you can place the css code in your general stylesheet.

This would make the menu visible throughout the website.

Some testing my be needed to get the effect needed.

Perfect! The only thing I need to add was a few <br />.

Thank you very much

Thread: Adding a CSS menu onto every page

Thread Tools

Search Thread

Display

Adding a CSS menu onto every page

Re: Adding a CSS menu onto every page

Re: Adding a CSS menu onto every page

Re: Adding a CSS menu onto every page

Re: Adding a CSS menu onto every page

Similar Threads

Adding a newly created Option Name/Value to every option menu

v151 Placing Navigation buttons via CSS on every page.

Adding CSS Menu to my site

Adding more products onto a single product page

Posting Permissions