Full Width Menu
-
HI how can i make my menu full width?
my site is http://www.babyexpos.co.nzmy 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;
}
}
-
you might need to change your html too, i think this rule controls the width
body .grid-container
The topic ‘Full Width Menu’ is closed to new replies.