Gantry 5 Hydrogen - Customize the menu & Add Space Above Drop-down Menu..

[EMar]

Hi,

I'm looking at my Gantry 4 gantry-custom.css file to get an idea how to edit the menu in Gantry 5.

What I want to do is add more space or a margin between the drop-down and the main menu.

The drop-down opens right on top of the main menu, I made the menu height smaller.

I have created a custom.scss file in: /public_html/templates/g5_hydrogen/custom/

Also what about the buttons in the menu, they're very flat,

What can you do to make them a bit more like buttons like in Gantry 4.

Any codes or suggestions I can try in my custom.scss file?

BTW I am enjoying the new admin interface, nice work.

Thanks

[EMar]

Well I managed to get a space between the top menu and the drop down thanks to W00fz on gitter.im/gantry/gantry5

Using this:

@import "nucleus/mixins/nav";

And this:

// Dropdown Side Offsets

@include dropdown-offset-x(14px, left);

// Dropdown Top Offsets

@include dropdown-offset-y(14px);

Anyway here's my custom.scss edits for anyone else, I'm still trying to find out how to edit the buttons in the drop down.

/* Adding Font ARRGH */

@import "nucleus/mixins/nav";

@import "vendor/bourbon/bourbon";

@include font-face('aaarghnormal', 'gantry-theme://fonts/Aaargh-webfont');

.font-family-bloody {

  font-family: 'aaarghnormal',Helvetica,Arial,sans-serif;

  font-weight: normal;

  font-style: normal;

}

.g-main-nav .g-toplevel > li > .g-menu-item-container {

  padding: 0.1rem 0.838rem;

}

.g-content {

  margin: 0.325rem;

  padding: 0.238rem;

}

// Dropdown Side Offsets

@include dropdown-offset-x(14px, left);

// Dropdown Top Offsets

@include dropdown-offset-y(14px);