Add a little color zinc to your online store. Customize the Menu Bar by changing menu bar background color or border color. Even more, change the font color and size too.


Please add the code in Settings --> Advanced Feature --> Third party Javascript



Refer below code to change Menu bar Background, Font color, Size, border etc.


<style>

#storedd {margin-top: 0.2em!important; background-color:#FFFFFF;border-radius:0;border:none;border-top:3px solid #E8EDE0;position:inherit !important;}

#storedd ul li a {font-size: 20px;font-weight: lighter;color: #303030;font-family:serif arial; margin-top:-3px;}

div.storemenu ul li a.current {border-top:3px solid #F78D3F!important;background-color:#FFFFFF!important;}

div.storemenu ul li a.current:hover {text-decoration:none!important;background-color:#F0F0F0!important;}

div.storemenu ul li a:hover {text-decoration:none!important;background-color:#F0F0F0!important;border-top:3px solid #003D3D;}

div.storemenu ul li div div ul li a {color : #303030!important;background-color: #F0F0F0!important;font-size : 18px!important;}

div.storemenu ul li div div ul li a:hover {color : #F78D3F!important;font-weight : bolder;text-decoration : none;font-size : 21px!important;border:none!important;}div.storemenu ul li div div.leftnav{background-color: #FFFFFF;}

div.storemenu ul li div {opacity : 1; border: none;}.bigbullet{display:none;}

</style>


To remove Home from Menu bar, 


<script>

$j('#storedd li:contains("Home")').hide(); 

</script>



Sample Implementation




 

<style>
#nav li:first-child a{ text-indent:-1000px; background:#fff url('http://www.aidalane.com/upload/page_photos/87070452-aed9-47f0-993d-7d0f972df86a.jpg') no-repeat 0px 7px; padding:5px 35px 5px 0px }
#nav li .leftnav a { text-indent:-0; }
</style>

<style>
#storedd { background:#fff; border-top:1px solid #5a5a5a; border-bottom:2px solid #5a5a5a }
#storedd ul li { border-right:1px dotted #5a5a5a; padding:0px  }
#storedd ul li:last-child { border:none }
#storedd a { font-family:georgia; font-size:17px;font-weight:normal; color:#5a5a5a !important; padding:5px 39px; cursor:hand  } 
#storedd a:hover, #storedd a:active, #storedd a:visited  { background:#D5D2D2; font-family:georgia; font-size:17px;font-weight:normal; color:#5a5a5a !important; padding:5px 39px  } 
.tpmar.featuredbg.featuredcolor { border-radius:0; border:1px solid #5a5a5a; border-top:1px dotted #5a5a5a; border-bottom:2px solid #5a5a5a; margin-top:30px; background:#fafafa }
.tpmar.featuredbg.featuredcolor ul{ padding:0; margin:0 }
.tpmar.featuredbg.featuredcolor ul li { padding:0; margin:0; line-height:2.5em  } 
.tpmar.featuredbg.featuredcolor ul li a,
.tpmar.featuredbg.featuredcolor ul li a:hover,
.tpmar.featuredbg.featuredcolor ul li a:visited,
.tpmar.featuredbg.featuredcolor ul li a:active { display:block; width:auto; padding:0 50px 0 50px !important; margin:0 !important; color:#5a5a5a; background:none !important }

</style>