How do I style a navigation block menu?

Question

I am having a pretty base navigation menu in d8 .But compared to d6 its style is pretty basic . How can i have a decent navigation menu ?

navigation menu in d8

navigation menu in d6

How can i have a styled navigation menu in d8 ?? I blurred it because content not to be exposed ;) .

Answer 1

You can style it by writing css that target the elements of the navigation menu. If you use the inspector in your browser you should be able to figure out what classes the menu is wrapped in so you can properly style it.

If you are using a custom theme you can start by adding a css file to a css folder. In this case I named mine style.css.

/path/to/custom/theme/css/style.css

.menu li{
    background: blue;
}

Then I came up with a name for my css library in mytheme.info.yml

name: MyTheme
description: My custom Theme
type: theme
core: 8.x
libraries:
  - mytheme/global-css

regions:
  header: 'Header'
  content: 'Main Content'
  footer: 'Footer'

Then I made sure that the library included our style.css file. In mytheme.libraries.yml I had

global-css:
  css:
      css/style.css: {}