Translucent menu drop down

• 

  taapsir · Member · Jul 14, 2015 at 7:02 pm

  • Copy link
  • Add topic to favorites

  I’d like to make the dropdowns in my primary menu translucent instead of opaque. Is there a simple CSS code that I can copy paste to make this happen? Thanks!

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

• 

  darrellschulte · Member · Jul 14, 2015 at 7:52 pm

  • Copy link

  Hello taapsir,

  You could try this solution. I’m not sure if it fully does what you were expecting or gets you part way there…thoughts?

  .main-navigation ul ul a {
      padding: 10px 8px;
      width: 244px;
      border: 0;
      background-color: transparent;
  }
  
  .large-screen .main-navigation ul ul a {
      background-color: transparent;
  }

• 

  taapsir · Member · Jul 15, 2015 at 5:23 pm

  • Copy link

  thanks a ton! but I was actually thinking something more like the dropdown in this theme?
  https://libredemo.wordpress.com/

• 

  taapsir · Member · Jul 15, 2015 at 5:26 pm

  • Copy link

  in other words, i guess the only change would be that the box borders are transparent too?

• 

  darrellschulte · Member · Jul 15, 2015 at 5:27 pm

  • Copy link

  Borderless and transparent? Or, borderless and opaque?

• 

  taapsir · Member · Jul 15, 2015 at 5:31 pm

  • Copy link

  i guess borderless and transparent. that’s how it is in the libre theme, right?

• 

  darrellschulte · Member · Jul 15, 2015 at 5:32 pm

  • Copy link

  No, Libre is opaque. You can’t see behind it.

• 

  taapsir · Member · Jul 15, 2015 at 5:35 pm

  • Copy link

  you’re right. the white background of the site threw me off. I’d like to try borderless and transparent. I like the way the code you sent makes my menu look now. only want to get the blue borders out.

• 

  darrellschulte · Member · Jul 15, 2015 at 6:06 pm

  • Copy link

  Here you go!

  ul.sub-menu.toggle-on {
      border: 0;
  }
  
  .large-screen .main-navigation ul ul li {
      border: 0;
  }

• 

  taapsir · Member · Jul 15, 2015 at 6:19 pm

  • Copy link

  thank you!!! it worked.
  I have one other menu coding request…
  in libre, the menu drops down upon hovering rather than clicking the buttons. what is happening on my website now (taapsiramchandani.com) is that if i don’t click the drop down arrow after i have clicked it once, the drop down menus stay there even when i click on another header tab! is this fixable?

• 

  darrellschulte · Member · Jul 15, 2015 at 6:34 pm

  • Copy link

  I’ll stare at it but I think that’s a tough one.

  I’m hoping @thesacredpath can lend his expertise on this particular question.

  @thesacredpath, the issue is that you can simultaneously toggle both submenus, which leads to a overlap of menu items.

• 

  taapsir · Member · Jul 15, 2015 at 6:54 pm

  • Copy link

  Thanks a ton. Look forward to hearing back.

• 

  thesacredpath · Member · Jul 16, 2015 at 12:52 am

  • Copy link

  @taapsir, I think this is the way the theme menu works. It isn’t something that can be changed via CSS. I’m going to chat with our developers and see if there is anything they can do to have a previous submenu close when you open another one. I’m not sure what this would entail, but I’ll see what they say.

• 

  taapsir · Member · Jul 16, 2015 at 1:02 am

  • Copy link

  Hi, thanks for the feedback. Just to confirm, even the menu navigation right now which requires you to click to access the sub menu rather than just hover over it is an in-built theme feature?

• 

  thesacredpath · Member · Jul 16, 2015 at 8:12 am

  • Copy link

  Yes, the menus are designed this way to make it easier for those using touch devices such as tablets. You can’t “hover” on a touch device, and if the top level menu also links to a page, the software doesn’t know if you want to go to that page when you touch it, or open the submenu. Trying to design menu systems that will work well for touch devices and also for desktop/laptop computers is a challenge.

  It may be that we can get a previously opened menu to close if you tap on another to open the submenu. I’ll chat with the developers to see if that is something that they can do. Personally I think this would be a good idea.

• 

  taapsir · Member · Jul 16, 2015 at 2:11 pm

  • Copy link

  Thanks a lot. I appreciate the help.
  On a side note, is it possible to convert a page to a grid template through CSS if the theme does not already have that option? The main reason I’m using Goran is because it gives me the grid page template which I need for the Artisan Videos and Courses Taught pages. I know I need to create a different thread for this, but I just want to find out if this is possible or not. Thanks for the clarification.

• 

  thesacredpath · Member · Jul 16, 2015 at 6:42 pm

  • Copy link

  Hand building a grid with HTML and CSS would be quite a bit of work and wouldn’t work as cleanly as on a theme that has a grid template. It may take a good bit of Media queries to get things to look right at different screen/browser window widths.

• 

  thesacredpath · Member · Jul 16, 2015 at 7:14 pm

  • Copy link

  @taapsir, I’ve chatted with the developers on this and have filed a bug ticket on it. I can’t say when the submenu issue will be fixed for sure, but I would think it will be by the end of next week at the latest.

• 

  taapsir · Member · Jul 16, 2015 at 9:28 pm

  • Copy link

  Thank you so much.
  I look forward to the rectification.

• 

  taapsir · Member · Jul 16, 2015 at 9:48 pm

  • Copy link

  Sacredpath,
  One other request. Is there a way to keep my menu sticky while I scroll to lower pages? Like the Libre theme?