0

I want to reduce the height of the top sections (navigation, logo, search and top links) in the default Magento Blank theme but I cannot figure out how to do this.

I have created _extend.less and _navigation_extend.less in theme/web/css/source

In _extend.less:

@import '_navigation_extend.less';

In _navigation_extend.less I have tried many variations on code, I can get the coloured bar to be smaller with the following but the text remains the same height:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.navigation {
    height: 30px;
}   

}

The text in the navigation bar still stays at 53px no matter what I do. I think it's linked to the ul but I've tried various versions of the following but I can't get it smaller:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.navigation {
    height: 30px;
}

.ul {
    margin: 0;
}   

}

Can anyone help me reduce the depth of these three sections? (I appreciate I haven't shown what I have done so far for the other two sections but help would be appreciated)

1

I managed to do this by adding the following code to my custom theme. Hopefully this will help others trying to do the same.

vendor/theme/web/css/source/_extend.less

@import '_extend-custom.less';
@import '_navigation_extend.less';

vendor/theme/web/css/source/_extend-custom.less

//
// Desktop
// _______________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

    // Make the very top bar smaller
    // Comes from magento/theme-frontend-blank/Magento_Theme/web/css/source/_module.less
    .page-header {
        .header.panel {
            &:extend(.abs-add-clearfix-desktop all);
            padding-bottom: 5px;
            padding-top: 5px;
        }
    }

    //Make the space required for the search box a smaller depth
    .block-search .control {
        border-top: 0;
        margin: 0;
        padding: 0;
    }

    // Make the logo smaller
    .logo {
        margin: 0;

        img {
            max-height: inherit;
        }
    }

    // Remove the space above the header on the desktop to make the bar thinner
    // Comes from magento/theme-frontend-blank/Magento_Theme/web/css/source/_module.less
    .header {
        &.content {
            &:extend(.abs-add-clearfix-desktop all);
            padding: 5px @indent__base 0;
        }
    }

    // Reduce the height of the navigation bar
    .navigation {
        height: 30px;
    }

}

vendor/theme/web/css/source/_navigation_extend.less

//
//  Desktop navigation
//  ---

// Reduce the height of the navigation bar from the standard 53px
@navigation-desktop-level0-item__line-height: 30px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.