Menu

• 

  jacksheldon · Member · Mar 19, 2016 at 11:35 am

  • Copy link
  • Add topic to favorites

  Hi, I’m new to CSS customisation and am hoping somebody who knows what they are doing will be able to help.

  I am in the process of making some tweaks to the appearance of our blog and there are two things that my manager has suggested that don’t seem to be doable without CSS. The first is to make the drop-down menus completely opaque, the second is to change the colour of the menu bar.

  We use Able theme. This is the link to the blog – https://constitution-unit.com/

  Jack

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

• 

  thesacredpath · Member · Mar 19, 2016 at 6:49 pm

  • Copy link

  On the submenu background, add the following to turn them fully white (opaque).

  .main-navigation ul ul {
      background: #fff;
  }

  On the menu bar, it is currently done with a linear gradient. If you wish the color to be a solid color, add the following and adjust the color as desired.

  .main-navigation, .menu-toggle {
      background-color: #f0f0f0;
      background-image: none;
  }

  If you wish to have a linear gradient, but wish to use different colors for that gradient, add the following and adjust the RGB color values (the first three numbers between the parentheses) as desired. The fourth number, is the transparency/opacity of those colors. The closer to 0, the more transparent, and the closer to 1, the more opaque. The reason there are soooo many of them is that some browsers/browser versions have their own code that has to be used. Each would be edited the same so that the first color codes in all of them are the same, and the second codes are all the same and the opacities are all the same, too. The first number is the top color and the second is the bottom color on the gradients.

  .main-navigation, .menu-toggle {
      background-color: #f0f0f0;
      background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(240,240,240,.8)),to(rgba(210,210,210,.8)));
      background-image: -webkit-linear-gradient(rgba(240,240,240,.8),rgba(210,210,210,.8));
      background-image: -moz-linear-gradient(rgba(240,240,240,.8),rgba(210,210,210,.8));
      background-image: -ms-linear-gradient(rgba(240,240,240,.8),rgba(210,210,210,.8));
      background-image: -o-linear-gradient(rgba(240,240,240,.8),rgba(210,210,210,.8));
      background-image: linear-gradient(rgba(240,240,240,.8),rgba(210,210,210,.8));
      filter:;
  }

  Linear gradients can seem a bit daunting at first, so if you wish to use those and would like some help, just let us know and we can help with that.

• 

  jacksheldon · Member · Mar 20, 2016 at 2:14 pm

  • Copy link

  Thank you, all very helpful. Will be back here if I have further queries.

• 

  thesacredpath · Member · Mar 20, 2016 at 6:00 pm

  • Copy link

  You are welcome.