Sunday, 22 November 2015 20:44

Gantry Framework menu styling

Written by
Rate this item
(0 votes)

This is short article about styling default gantry framework menu, add some css transition for animation effect ( similar to effect what I have on my website ). Here we are not going to work with LESS files.

We must create gantry-custom.css for our css changes. If you are not familiar with gantry framework, to avoid disaster while updating, you shod create file: yourTemplateName-custom.css. Because we modify default gantry framework template, we use gantry-custom. First we need to modify .gf-menu .dropdown

.gf-menu .dropdown{
    margin:0 auto;
    margin-top: 50px;
    padding: 10px 0;
    position: absolute;
    opacity: 0;
    left:0;
    text-align: left;
    background: red !important;
    z-index: 0;
    visibility: hidden;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;;
    transition: all 500ms ease-out;;
}

We added transition effect on all css properites, but really we will animate only margin-top, opacity, and set visibility to true. Here you also can adjust transition duration ,transition effect and get rid off this ugly red background color ;). Below what we got for on hover state.

.gf-menu li:hover > .dropdown{
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    margin-top: 0 !important;
    left:  -1px;
    top:auto;
}

I also increased z-index in case I decide to use slideshow and I wouldn't like menu to appear behind it. If you try it know it will work fine, but when you resize your browser window and click on toggle menu button you will see:

Well..totally broken menu. Actually it isn't broken it works the way we just coded, we have stuff there but is hidden and with correct margin-top! Fortunately there is simple fix to our problem.

.gf-menu-device-container-wrapper ul.gf-menu .dropdown{
    visibility:visible;
    margin-top: auto !important;
    left:-1px;
}

Now , our menu works as should.

Just few lines of code and you may improve user experience>

I hope you find this article useful, I also attached gantry-custom.css with these changes.

Read 1815 times
More in this category: Full Width Slideshow »