Reduce the height of the navigation bar, header (where the logo is) and top links

[phillipmeyer]

I would really like to reduce the amount of space that these sections take up on the page. I've spent a lot of time trying to figure this out but I cannot successfully change this.

So far 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)

[ShoaibRehman89]

@phillipmeyer

Magento uses LESS for the frontend and it requires you to redeploy the static content every time you make a change. 

Can  you confirm that you redeployed static content after making the change? Also make sure that you have done the following: 

• Set deploy mode to developer | You can do so by running 'php magento deploy:mode:set developer'
• Disable and clean Magento cache
• Redeploy static content in your selected locale

FYI - all less files are compiled into a final style-m.css and style-l.css files. 

For more information visit: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html 

[phillipmeyer]

Hello,

Thank you for such a prompt reply. I have done all of those and I can successfully change the thickness of the grey bar in the navigation but what I cannot figure out, is how to change the overall depth of the whole area so that the text in the navigation moves up as well.

I want to reduce the depth of the whole navigation section so that it is thinner. After that I actually want to reduce the depth of the header section above that where the logo is shown.