Nav Menu CSS Centering - My Forums

Re: Nav Menu CSS Centering

lkfranklin — Aug 16, 2017, 04:49 AM

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.

Re: Nav Menu CSS Centering

loiariu — Aug 16, 2017, 03:51 AM

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;
}

Re: Nav Menu CSS Centering

loiariu — Aug 16, 2017, 03:50 AM

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

Re: Nav Menu CSS Centering

gekinwired24 — Mar 06, 2014, 08:32 AM

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.

Re: Nav Menu CSS Centering

paulp — Mar 05, 2014, 03:35 PM

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.

Re: Nav Menu CSS Centering

gekinwired24 — Mar 05, 2014, 03:32 PM

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.

Re: Nav Menu CSS Centering

paulp — Mar 05, 2014, 03:20 PM

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;
}

Re: Nav Menu CSS Centering

gekinwired24 — Mar 05, 2014, 03:16 PM

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

Re: Nav Menu CSS Centering

paulp — Mar 05, 2014, 02:46 PM

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

Nav Menu CSS Centering

gekinwired24 — Mar 05, 2014, 02:39 PM

.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;
}