Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    mega menu background color

    I am working with a megamenu in a joomla template. There is no background on my text except during rollover or selection. I would like the background to remain on at all times. (black to give contrast to light text)
    Site-http://signed-in.com/strongholdmp.com/

    Im willing to pay for help on this

    The css Code is:


    html {
    direction: rtl;
    }
    /*logo*/
    .menusys-left {
    float: right;
    width: 450px;
    }
    .menusys-right {
    float: left;
    width: 400px;
    }
    #menusys_mega li{
    float:right;
    margin: 0 0 0 10px;
    }
    #menusys_mega .megacol ul li a span.no-image {
    background: url("../images/bg-megamenu-arrow.png") no-repeat 100% 50%;
    padding: 0 10px 0 0px;
    }
    #menusys_mega .megacol ul li a:hover ,
    #menusys_mega .megacol ul li a:focus span.no-image,
    #menusys_mega .megacol ul li a:active span.no-image,
    #menusys_mega .megacol ul li a.active span.no-image,
    #menusys_mega .megacol ul li a.active:hover span.no-image,
    #menusys_mega .megacol ul li a.active:active span.no-image,
    #menusys_mega .megacol ul li a.active:focus span.no-image {
    background: url("../images/bg-megamenu-arrow-active.png") no-repeat 100% 50%;
    }
    #menusys_mega .megacol ul.mega-ul {
    padding: 0 10px 0 0;
    }
    #zt-logo {
    left: auto;
    right: 365px;
    }


    /*title*/
    .outer3 h3.moduletitle {
    padding: 0 10px 0 0;
    }
    .outer2 h3.moduletitle {
    padding: 0 10px 0 0;
    }

    ul.menu li {
    background: url("../images/zt-iner-bg-list-menu.png") repeat-x right top;
    padding:0 15px 0 0;
    }
    ul.menu li a {
    padding-left: auto;
    padding-right: 0px;
    }
    ul.menu li a span {
    background: url("../images/arrow_rtl.png") no-repeat right 50%;
    padding-left: auto;
    padding-right: 20px;
    }

    ul.menu2 li .man {
    background: url("../images/zt-iner-icon-man.png") no-repeat scroll 95% 7px;
    padding: 4px 30px 4px 10px;
    }
    ul.menu2 li .woman {
    background: url("../images/zt-iner-icon-woman.png") no-repeat 95% 7px;
    padding: 4px 30px 4px 10px;
    }
    /*col 1*/

    #zt-col1 .jvcarousel-pagi {
    float: left;
    right: auto;
    left: 10px;
    }
    #zt-col1 .readon {
    float: right;
    }

    /*col 2*/
    #zt-col2 .readon{
    float:right;
    }
    #zt-col2 div.latestnewsitems img{
    float:right;
    }
    #zt-col4 li.jv-article-title a {
    float: right;
    }
    #zt-col4 .jv_news_wrap li.jv-article-title h4 a {
    margin: 0 7px 0 0;
    }

    /*footer*/
    #zt-footer-menu {
    float: left;
    width: 50%;
    }
    #zt-footer-menu ul {
    float: right;
    }
    #zt-footer-menu ul li {
    background: url("../images/zt-iner-hr-menu.png") no-repeat scroll right 50% transparent;
    float: left;
    }
    #zt-footer-menu ul li.first {
    padding: 0 10px 0 0px !important;
    }
    #zt-footer-menu ul li.last {
    padding: 0 0 0 10px !important;

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The following will give you a background colour on your left and right menus in their entirety:

    Code:
    .menusys-left {
        background-color: red;
        float: left;
        width: 450px;
    }
    .menusys-right {
        background-color: blue;
        float: right;
        width: 400px;
    }
    or, to give each button its own background:

    Code:
    #menusys_mega li {
        background: none repeat scroll 0 50% green;
        display: block;
        float: left;
        height: 28px;
        margin: 0 10px 0 0;
        padding: 0;
    }
    Adjust colours to taste, obviously....

  • Users who have thanked SB65 for this post:

    kevinmc (06-11-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •