We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 46519
    • 5 Posts
    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;
    }
      • 22840
      • 1,572 Posts
      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
        • 46519
        • 5 Posts
        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
          • 22840
          • 1,572 Posts
          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;
          }
          
            • 46519
            • 5 Posts
            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.

              • 22840
              • 1,572 Posts
              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.
                • 46519
                • 5 Posts
                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.
                  • 53690
                  • 2 Posts
                  learning this and not just getting the results without knowing the process.
                    • 53690
                    • 2 Posts
                    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;
                    }
                      • 17301
                      • 932 Posts
                      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.