Css mobile site menu bar

• 

  tylerbernhardt · Member · Oct 1, 2016 at 7:24 pm

  • Copy link
  • Add topic to favorites

  How can i add/adjust the transparency of the menu bar on the mobile site with css?

  The blog I need help with is: (visible only to logged in users)

• 

  innisfreehomestead · Member · Oct 1, 2016 at 8:30 pm

  • Copy link

  Hey there,

  It looks like you already have custom code affecting the transparency of the menu bar, so it’s just a matter of editing it:

  #logo, #navbar, .main-navigation ul, .main-navigation ul li {
  	background: rgba(255,255,255,0.03);
  }

  The last number, 0.03 changes the transparency. Right now it’s nearly completely transparent, change it to just 1.00 though and it won’t be transparent at all.

  Hope that helps,
  Sage

• 

  tylerbernhardt · Member · Oct 1, 2016 at 8:41 pm

  • Copy link

  It didnt work:/ notice i altered the menu bars color to that blue by using code in css…

• 

  tylerbernhardt · Member · Oct 1, 2016 at 8:44 pm

  • Copy link

  Im talking about the menu search bar

• 

  tylerbernhardt · Member · Oct 1, 2016 at 8:45 pm

  • Copy link

  In my mobile theme

• 

  innisfreehomestead · Member · Oct 1, 2016 at 8:46 pm

  • Copy link

  Ah, my apologies, I overlooked that you mentioned it is for the mobile menu.

  .menu-search {
  	background-color: rgba(255,255,255,0.03) !important;
  	box-shadow: none !important;
  }

  And then if you don’t want the menu text to vanish into the background:

  #access .menu-toggle {
  	color: #333;
  }

  Is that better?
  Sage

• 

  tylerbernhardt · Member · Oct 1, 2016 at 8:48 pm

  • Copy link

  I want the mobile menu bar to look like it does now, with the hex color i chose, but 80% transparency. No shadow

• 

  innisfreehomestead · Member · Oct 1, 2016 at 8:54 pm

  • Copy link

  Changing the numbers inside the rgba code to 114, 150, 189, .8 should fix the transparency and keep the colour :)