Creating a specific button design for my main nav

Hey guys,

I just started working with Beans and I enjoy it a lot so far.

Now I want to build a more sketchy navigation list like this: http://up.picr.de/26190567dz.png (orange: current site, grey: hover).

Which leads me to the question: how is something like this possible in Beans? Like "spawning" the grey and orange boxes under my buttons.

I'm currently only messing around in my child themes functions.php and style.css and don't know how to edit the specific button styles.

Thanks a lot!

Hi Tobias, and welcome to Beans Community 🙂

The easiest here is to modify UIkit LESS variables and use the nav hooks. For that, you are going to make modification in your style.less file. So what you want to do is add a style.less file in your child theme if you don't already have one. Then you want to add the following in your functions.php to enqueue your LESS file.

add_action( 'beans_uikit_enqueue_scripts', 'beans_child_enqueue_uikit_assets' );

function beans_child_enqueue_uikit_assets() {

 beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

From there, all the changes you make will be turn into CSS, make sure that you have development enabled in your admin Appearance->Settings when you are working on it so that you changes apply.

In your style.less file, add the following snippet to achieve the effect you are looking for:

@navbar-nav-hover-background: transparent;
@navbar-nav-onclick-background: transparent;
@navbar-nav-active-background: transparent;

.hook-navbar-nav {
  border-bottom: 5px solid transparent;
}

.hook-navbar-nav-hover {
  border-bottom-color: #444;
}

.hook-navbar-nav-active {
  border-bottom-color: #F89201;
}

Not that this snippet will remove the hover and active background, and add the orange bar on active an dark gray on hover. In the snippet above, the bar is the menu item full width, but if you want to control the bar width and make it consistent, use the snippent below:

@navbar-nav-hover-background: transparent;
@navbar-nav-onclick-background: transparent;
@navbar-nav-active-background: transparent;

.hook-navbar-nav {
 &:after {
   content: "";
    width: 40px;
    height: 5px;
    display: block;
   margin: auto;
 }
}

.hook-navbar-nav-hover {
  &:after {
   background: #444;
 }
}

.hook-navbar-nav-active {
 &:after {
   background: #F89201;
  }
}

Now that you are making modification in your style.less, you may move all your style.css stuff in there as it is perfectly fine to write CSS in LESS files. Then you can remove the style.css enqueue in your functions.php but be careful not to delete style.css as the header comments are used by WordPress to declare the child theme name etc.

Have fun,

Thank you so much for your effort!

Works like a charm 🙂

Regulating the border width unfortunately still doesn't work. And is it a problem if I am using both style.less and the style.css or could that cause some problems aside from the worse overview over my adaptions?

Hey Tobias,

My bad, I pasted the same code for the second option that is why the fixed width wasn't working 🙁 I just updated my previous answer with the correct code so you can go ahead and try the second version which is the fixed width.

Regarding keep both stylesheet, yes you can if you prefer as when you are done working on your site, disable development mode and enable CSS compiling in Admin->Appearance->Settings which will compile everything in one file automatically so it won't make a difference.

Have fun,

Works perfectly, thank you so much! 🙂