Inconsistent button behavior, Blaskan theme

• 

  innocentorguk · Member · Dec 12, 2015 at 2:39 pm

  • Copy link
  • Add topic to favorites

  I have changed the black button on my site to green. When I select a button that doesn’t have a sub-menu, the button turns black to indicate that it is selected.

  However, if I select from a button that has a sub-menu (for example, ‘Resources’ or ‘Miscarriages of Justice’ on my site) neither the top level button nor the sub-menu button goes black.

  I’ve tried to do the CSS, but can’t make it consistent. Could some help with the CSS, please? Ideally I would like the top level button to turn black if a sub-menu is selected.

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

• 

  innocentorguk · Member · Dec 12, 2015 at 3:08 pm

  • Copy link

  It’s inconsistent behaviour – at first I thought it was because I had a button that was bringing up posts belonging to a category that had no posts. I fixed that issue and it’s fine now. But on another site I’ve made using Blaskan, I see the same problem even when there’s plenty of posts belonging to the category.

• 

  innocentorguk · Member · Dec 12, 2015 at 3:22 pm

  • Copy link

  Okay. The changes color when the button selects posts based category.

  If the button goes to a page or a link, it doesn’t change color.

  This is really weird behaviour, I’ve no idea why it would be programmed to work that way! Can anyone help fix it, please?

• 

  thesacredpath · Member · Dec 15, 2015 at 7:03 am

  • Copy link

  Hi there, I’m not currently seeing any submenus on your site, but I took a look in your customizer and the last rule you have has some incorrect syntax that is causing it to not be applied. Remove that rule and replace it with the following and see if this gets you what you are wanting.

  #nav .menu > ul > .current-menu-item > a, #nav .menu > ul > .current-menu-item > a:hover, #nav .menu > ul > .current-menu-item > a:focus, #nav .menu > ul > .current-menu-ancester > a, #nav .menu > ul > .current_page_item > a, #nav .menu > ul > .current_page_item > a:hover, #nav .menu > ul > .current_page_item > a:focus, #nav .menu > ul > .current_page_ancestor > a {
  	background: #000;
  	background: -webkit-linear-gradient(left top #005500 #005500);
  	background: -moz-linear-gradient(left top #005500 #005500);
  	background: -o-linear-gradient(left top #005500 #005500)
  	background: linear-gradient(left top #005500 #005500)
  }

  As a reference, I would suggest looking at W3C Schools Linear Gradient page.

  Let me know if this is not what you were looking for, and explain how you want the gradient.

• 

  innocentorguk · Member · Dec 15, 2015 at 10:11 pm

  • Copy link

  Thanks thesacredpath!

  I changed the navigation to exclude submenus when I couldn’t figure out what I was doing wrong. I think gradients are a bit beyond my skill level :)

• 

  thesacredpath · Member · Dec 15, 2015 at 10:26 pm

  • Copy link

  You are welcome, and gradients require quite a bit more code. In the future, there will only be one line required for a linear gradient instead of all the browser-specific lines required now.