Nav Menu CSS Centering

5 Posts

gekinwired24 Reply #1, 10 years, 1 month ago

Hello,

I am pretty new to the whole MODX scene and just took over my companies website that was origianlly built on MODX platform.

I've changed the menu to something that I like better but for some reason it keeps staying to the left of the page under the banner no matter what I do to it.

Any ideas? All help is very much appreciated since I am trying to learn all this stuff.

Here is the CSS:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

1,572 Posts

Paulp Reply #2, 10 years, 1 month ago

Would be better and quicker if you could give us a link to debug it

Also theres no need for display inline and float left on .jqueryslidemenu ul li

5 Posts

gekinwired24 Reply #3, 10 years, 1 month ago

Here is the link of a "Test Page" I'm working on because I am new at this and have no idea how it was originally set up: http://www.capecoraleyecenter.com/duplicate-of-home1.html

The blue block across the top is where the new banner will be. And the menu will be centered under it. Or least that's the goal.

Thanks for your help! Seriously

1,572 Posts

Paulp Reply #4, 10 years, 1 month ago

Try the following, just replace your code with mine:


.jqueryslidemenu {
    background: none repeat scroll 0 0 #7CCCBF;
    font: bold 12px Verdana;
    text-align: center;
    width: 100%;
}
.jqueryslidemenu ul li {
    display: inline-block;
    position: relative;
}

5 Posts

gekinwired24 Reply #5, 10 years, 1 month ago

That worked perfectly! May I ask, the "txt-align: center;" is the property and produced the actual alignment? I am really interested in learning this and not just getting the results without knowing the process.

1,572 Posts

Paulp Reply #6, 10 years, 1 month ago

text-align center aligns all text in the element to the center, you were falling down because you had floa: left on the li which overrides that, removing the float-left and using display: inline ( equivelent to float ) - block ( so it fills the full space ) fixed it.

5 Posts

gekinwired24 Reply #7, 10 years, 1 month ago

Thanks for showing me that. Now it makes a lot more sense. Hopefully one day I can become just a useful to the forum like you guys.

2 Posts

loiariu Reply #8, 6 years, 8 months ago

learning this and not just getting the results without knowing the process.

2 Posts

loiariu Reply #9, 6 years, 8 months ago

Hello,

I am pretty new to the whole MODX scene and just took over my companies website that was origianlly built on MODX platform.

I've changed the menu to something that I like better but for some reason it keeps staying to the left of the page under the banner no matter what I do to it.

Any ideas? All help is very much appreciated since I am trying to learn all this stuff.

Here is the CSS:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

932 Posts

LK Reply #10, 6 years, 8 months ago

As before if you post a link to the site it would be a lot quicker and easier for us to help you on this.

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.