Friday, November 27, 2020 2:42:18 PM

Change height and color of the header

6 years ago
#2439 Quote
I need to make the header bigger in the height, because of my logo.
Also I tried to change the color of header and the menu bar, but where not able to find the right place.
Could some one please give me a hint about which css to change and, perhaps where in the css I need to alter these things
6 years ago
#2444 Quote
Please provide your live URL.

Thank you for choosing our products!
6 years ago
#2445 Quote
Hello Alex

Here you go:

6 years ago
#2446 Quote
May I suggest you something?
Do you want to resize your logo through css, let's say to 150px in wide because you need to change a height of your header in all resolutions from 320px to 1200px.

Also your menu have too much items, try to create structure parent -> child, group them.

If you decide to correct your logo through css place next code in the end of Themes/../Content/custom.css file

.header-logo {width: 150px;}
.header-logo a {display: block;}
.header-logo a img {height: auto;}

and in Themes/../Content/responsive.css file 381 row should be "clear: right;" and not "clear: both;"

.header-selectors-wrapper {clear: right;}
Thank you for choosing our products!
6 years ago
#2447 Quote
Actually I was not interesting in changing the size of my logo, I was looking to change the size, the height, of the header. Is that possible?

Also I would like to change some of colors of the template.
For instance the menu bar colour, but I have using many hours to try to find this in the css. Along with the possibility to change the background.

Best regards
6 years ago
#2448 Quote
You need to use Firefox with debugger. Open Firefox browser and click combination of Ctrl+Shift+I. To enable responsive view click Ctrl+Shift+M. Check this video

You have two css files responsible for design and responsive: custom.css and responsive.css. Responsive responsible for responsive features. In eg. if you want to change a height of the header you need to change a height of .header class in the next blocks:


@media screen and (min-width:320px){}
@media screen and (min-width:480px) {}
@media screen and (min-width:768px) {}

background should be changed in responsive.css

@media screen and (min-width:980px) {}

and custom.css  27 row
Thank you for choosing our products!
We have something for you :)