Jump to content
Sign in to follow this  
chules

How to indent my top menu

Recommended Posts

chules

I am working on a site at http://www.poweredbyc5.com. I have used pagelines customize plugin to add a top menu to my site. What I am trying to do is indent the top menu so the "C" in Create Account lines up above the "H" in Home. I wish this to be permanently locked into place. Here is the code I am using in my customize/style.css

ul#menu-top-nav li{text-decoration:none;
	display:inline;}
	
	ul#menu-top-nav li.menu-item a { padding:8px 0px 8px 14px;}
	
	ul#menu-top-nav {margin-left: 400px !important;}

What is happening is when I resize the width of my browser or another person views the site from another computer this top menu shifts around horizontally depending on the size of your browser window. I wish this to stay fixed as does the log and the "Home" in menu. can anyone assist me with how to achieve this. I know it's my last line of code and that margin-left is probably not the correct way to do this. Thank you - chules

Share this post


Link to post
Share on other sites
Danny

Hi, Replace this:

ul#menu-top-nav {margin-left: 400px !important;}
With this:
.menu-top-nav-container { width: 100%; }
	ul#menu-top-nav { width: 1100px; margin: auto; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chules

Danny, Thank you!!! This worked great - chules

Share this post


Link to post
Share on other sites
Danny

No problem, happy to help!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chules

Danny, I have a question about the following code. It works perfectly to position the menu to the left side of the site. If I wanted to modify this to position the menu to the right side of the site so the shopping cart aligns to the right side of the sites page width how could this be achieved. Visually I imaging the rights side pagewidth is probably positioning the shopping cart above the pause button on the rotator. The pause button has to be close to the page end yes?

.menu-top-nav-container { width: 100%; }
	ul#menu-top-nav { width: 1100px; margin: auto; }

Again thank you for the assistance Mark

Share this post


Link to post
Share on other sites
chules

I am trying to see if I can modify the code below to align the top menu to the right. Does anyone know how this can be achieved. Thank you - chules I have a question about the following code. It works perfectly to position the menu to the left side of the site. If I wanted to modify this to position the menu to the right side of the site so the shopping cart aligns to the right side of the sites page width how could this be achieved. Visually I imaging the rights side pagewidth is probably positioning the shopping cart above the pause button on the rotator. The pause button has to be close to the page end yes?

.menu-top-nav-container { width: 100%; }
	ul#menu-top-nav { width: 1100px; margin: auto; }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×