Code snippets: Navigation page

Owned by Sofie Desombere

Last updated: 13 September 2022 by Dries

3 min read

1 Remove icon from menu item

.gridItem__icon {
    display:none;
}

2 Remove colored overlay from menu item

.gridItem__image {
    opacity: 1;
}

3 Change border-radius menu

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

4 Remove the Basecolor background

Note: if you notice a small border around the gridItem__image, you should change the background-color of the gridItem.

5 Change the background to a color

6 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

7 Adjust the background color of a menu title

8 Place the title under the image

9 Adjust the size of a menu button

10 Adjust the size of the menu area

11 Limit your changes to one menu

Template 1

Place Navigation or Mediabrowser buttons on the bottom right on your page.