• HI how can i make my menu full width?
    my site is http://www.babyexpos.co.nz

    my custom CSS is

    #soliloquy-container-199 { text-align: center; margin: auto; }
    .sf-menu > li {
    width: 14.26%;
    }
    .wpb_tour_tabs_wrapper .wpb_tabs_nav li{
    background-color: #d0d0d0!important;
    border-radius: 10px 10px 0 0;
    }
    .wpb_tour_tabs_wrapper .wpb_tabs_nav li a{
    color: #21a8d1;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    }
    .wpb_tour_tabs_wrapper .wpb_tabs_nav li.ui-tabs-active{
    background-color: #21a8d1 !important;
    }
    .wpb_tour_tabs_wrapper .wpb_tabs_nav li.ui-tabs-active a{
    color: #fff;
    }
    .main-navigation, .main-navigation ul ul {
    background-color: transparent !important;
    }
    .sf-menu > li a:hover{

    transition: all 1s ease 0s;
    padding-bottom: 20px !important;
    }
    .sf-menu > li:nth-child(1) a{
    background-color: #33AED2 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    }
    .sf-menu > li:nth-child(2) a{
    background-color: #FF9000 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    }
    .sf-menu > li:nth-child(3) a{
    background-color: #68C59D !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    }
    .sf-menu > li:nth-child(4) a{
    letter-spacing: 2px;
    text-transform: uppercase;
    background-color: #BB73BD !important;
    }
    .sf-menu > li:nth-child(5) a{
    background-color: #E84559 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    }
    .sf-menu > li:nth-child(6) a{
    background-color: #030303 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    }
    .sf-menu > li:nth-child(7) a{
    letter-spacing: 2px;
    text-transform: uppercase;
    background-color: #030303 !important;
    }
    @media screen and (max-width:1111px) {
    .sf-menu > li a {
    letter-spacing: 0 !important;
    }

    }

    @media screen and (max-width:997px) {
    .sf-menu > li:nth-child(6) a {
    letter-spacing: -1px !important;
    }
    }
    @media screen and (max-width:767px) {
    .sf-menu > li {
    width: 100%;
    }
    .main-navigation, .main-navigation ul ul {
    background-color: #68C59D !important;
    }
    .sf-menu > li:nth-child(6) a {
    letter-spacing: 0px !important;
    }
    .sf-menu > li a {
    text-align: center;
    }
    }

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)

The topic ‘Full Width Menu’ is closed to new replies.