cancel
Showing results for 
Search instead for 
Did you mean: 

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

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

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

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)

 

2 REPLIES 2

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

@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 

Magento Certified Solution Specialist | Lead Magento developer
If this response was helpful to you, consider giving kudos to this post

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

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.