Code snippets: Navigation page

  1. Remove icon from menu item

1 2 3 .gridItem__icon { display:none; }

 

  1. Remove colored overlay from menu item

    1 2 3 .gridItem__image { opacity: 1; }

     

  2. Change border-radius menu

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

     

  3. Remove the Basecolor background

    1 2 3 .gridItem { background: none | white; }

     

  4. Change the background to a color

    1 2 3 4 5 6 7 8 .gridItem { background: #E7EAED; } /* change the background for a specific item */ .gridItem:nth-child(2) { background: red; }

     

  5. 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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .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; }

     

  6. Adjust the background color of a menu title

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

     

  7. Place the title under the image

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 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%); }

     

  8. Adjust the size of a menu button

    1 2 3 4 5 6 7 8 // 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% }

     

  9. Adjust the size of the menu area

    1 2 3 4 5 .grid__container{ //add padding to make the menu area smaller padding-left:10% padding-right:10% }

     

  10. Limit your changes to one menu

    1 2 3 4 5 6 7 8 9 10 //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 }