Change sub navs structurs



Hi Alexandra,

For the past week, I myself have been trying to implement this using only Beans and UIkit, but I found it to be problematic. UIkit doesn't seem capable of creating a dropdown within another dropdown. I've only been able to get a single-level dropdown to work.

The only solution I can think of is to style all the dropdowns manually with CSS.

A compromise is to let UIkit create the first-level dropdown for you. Then, style subsequent levels using CSS, like:

.tm-primary-menu ul ul li {
 position: relative;
}

.tm-primary-menu ul ul li ul {
  display: none;
  position: absolute;
 top: 0px;
 left: 200px;
  width: 250px;
 padding: 15px;
  background-color: #f5f5f5;
}

.tm-primary-menu ul ul li:hover > ul {
 display: block;
}

.uk-dropdown:focus {
  outline: none;
}

I'm curious if anyone else has a better solution to this problem.

Best of luck,

Charles


Hey guys,

As Charles correctly said, UIkit doesn't have the styling needed out of the box! The CSS provided works well on my side and is the best solution I can think of 😉

Have fun,


Thank you very much Charles !

I am going to test it 🙂


You're welcome! I'm glad I could be of help.

Write a reply

Login or register to write a reply, it's free!