Ask your WordPress questions! Pay money and get answers fast! (more info)

Woocommerce / Menu

  • SOLVED


1. Remove Cart/Basket from Menu/Nav and replace with a Search tab.

2. Make menu items including search tab same width streching the website width and responsive

3. Change color of each menu tab to #0f87ff, #adff5b, #ff5bad, 5badff

4. Make header narrower and so website title dosent drop onto 2 lines on smaller devices.

Answers (2)

2016-09-24

Rempty answers:

Hello use add this css:

.site-header-cart.menu{
display:none!important;
}
@media only screen and (min-width:768px){
.site-header .site-branding{
width:30%!important;
}
.woocommerce-active .site-header .main-navigation{
width:100%!important;
}
}

li#menu-item-84,li#menu-item-84 ul{
background-color:#0f87ff!important;
}
li#menu-item-79, li#menu-item-79 ul{
background-color:#adff5b!important;
}
li#menu-item-80, li#menu-item-80 ul{
background-color:#ff5bad!important;
}
li#menu-item-85, li#menu-item-85 ul{
background-color:#5badff!important;
}
.main-navigation .primary-navigation ul li a{
color:#fff!important;

}
.main-navigation .primary-navigation ul > li a{
text-align: center;
}
.main-navigation .primary-navigation ul li{
float:left!important;
width:25%!important;
}
.main-navigation .primary-navigation ul li ul li{
float:none!important;
width:100%!important;
}
.main-navigation .primary-navigation ul li ul li a{
text-align:left;
}
.primary-navigation ul.sub-menu{
width:100%!important;
}
.main-navigation .primary-navigation ul.menu > li:first-child, .main-navigation ul.nav-menu > li:first-child{
margin-left:0!important;
}
.main-navigation .primary-navigation ul.menu > li > a, .main-navigation .primary-navigation ul.nav-menu > li > a{
padding: 1.618em 0!important;
}


suddy12007 comments:

brill,

could you let me know how to add a suttle shadow to the bottom of the menu buttons and sticky when it hits the top of the viewport like tjisiswhyimbroke.com

2016-09-26

Arnav Joy answers:

Hi ,
Can you show me url of your site ?
-Arnav


suddy12007 comments:

http://79.170.40.234/newgcp.uk/


Arnav Joy comments:

can you let me know which points are left now ??
because I can not see cart icon on menu