Code snippets: Navigation page

Remove icon from menu item

.gridItem__icon {
    display:none;
}

Remove colored overlay from menu item
```
.gridItem__image {
    opacity: 1;
}
```

Change border-radius menu

.OcuDarcula .gridItem, .OcuLight .gridItem,
.OcuDarcula .gridItem__image, .OcuLight .gridItem__image {
    border-radius: 2%;
}

Remove the Basecolor background

.gridItem {
  background: none | white;
}

Change the background to a color

.gridItem  {
    background: #E7EAED;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background: red;
}

Change the background to an image
Use the module ‘asset bundle’ if you want to upload your images in Ocularium: https://ocular.atlassian.net/l/c/ymc8q9Xg

.gridItem  {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

Adjust the background color of a menu title

.gridItem__title p {
    background-color: #3C9B28;
    // add more options here
}

Place the title under the image

// add some margin 
.gridItem {
  margin: 3em 2em;
}
.gridItem__title {
    height: 10;
    bottom: -10%;
    // add more options like...
    font-weight: bold;
    color: black;
    white-space: normal;
}

// align text to top line
.gridItem__title p {
    top: 0;
    transform: translateX(-50%);
}

Adjust the size of a menu button

// add some margin 
.gridItem {
  //default width is 18%
  width:14%
  //if you don't want more buttons on one line add margin to compensate
  margin-left: 2%
  margin-right: 2%
}

Adjust the size of the menu area

.grid__container{
  //add padding to make the menu area smaller  
  padding-left:10%
  padding-right:10%
}

Limit your changes to one menu

//put .page.page--nav--1234 in front of the class 
//replace 1234 with correct id that can be found using the browsers development tools
//examples:
.page.page--nav--1234 .gridItem{
  //only gridItems under page 1234 will be affected
}

.page.page--nav--1234 .grid__container{
  //only the container under page 1234 will be affected
}