Hello
I would like the mobile header / logo to be much bigger than it is, probably 3 x the size or more.
When I use inspect I can see how to increase the size of th elogo itself, but not the black header behind it. So the logo overspills onto the content.
Please can you advise how I increase the whole header area as well as the logo size?
http://thedarklordspeaks.com.gridhosted.co.uk/
Many thanks!
Lauren
Hello laurena86,
You should use a bit of CSS code to increase that. Place it in the Custom CSS area.
@media (max-width: 767px){
.td-main-menu-logo img {
max-height: 60px !important;
width: 150px;
}
}
The result you should see here -> http://screencast.com/t/Xi1HACjn
Thanks for the message!
Hi Catalin
Thank you – I see that it increases the width but it squashes the logo and remains the same height. I would like that whole black bar plus the logo to be double the height at least?
Many thanks
Lauren
Hello laurena86,
If you want to increase the height of your menu black bar you should use a bit of CSS to do that. Try the code below and place it in Theme panel->Custom CSS area.
The code is ->
@media (max-width: 767px){
.td-header-main-menu {
height: 70px;
}
}
You can change the height value as you wish.
Hope this helps!
Thanks for your understanding!
Hi Catalin
I’ve currently got this code in my custom CSS as per the above but nothing has changed at all on my site?
Also there is a red error message next to the first line saying expected RBRACE at line 162 column 1, any idea what that means?
Cheers!
Lauren
@media (max-width: 767px){
.td-header-main-menu {
height: 120px;
}
}
@media (max-width: 767px){
.td-main-menu-logo img {
max-height: 100px !important;
width: 200px;
}
}
Hello laurena86,
You can try the code below and place it in Theme panel->Custom CSS area.
@media (max-width: 767px){
.td-header-main-menu {
height: 120px;
}
}
@media (max-width: 767px){
.td-main-menu-logo img {
max-height: 100px !important;
width: 200px;
top: 60px;
}
}
@media (max-width: 767px){
.header-search-wrap .td-icon-search {
padding-top: 35px;
}
}
@media (max-width: 767px){
#td-top-mobile-toggle{
top:35px;
}
}
The result -> http://screencast.com/t/BqesKyKxQI
Thanks.
Hi Catalin
That screenshot result is exactly what I’m after, but even after trying that code in the Custom CSS box in theme panel still nothing seems to be happening?
I have just used a cross browser tester and also tried on a different browser and my device.
Any idea?
Many thanks
Lauren
Hello laurena86,
Please try to add the !important tag for every rule to give more importance to your code. Check the whole code to not have a syntax error.
Hope this helps and let us know how it goes!
Thanks for your understanding!
Hi Catalin
I have tried that – here’s the screenshot of the code: http://prntscr.com/dabwf3
The red ‘x’ is that error I mentioned before that says ‘expected RBRACE at line 169, col 1’ but I can’t see what can be wrong?
Is it possible to private message you logins to take a look? I’d really appreciate your expertise as I’m not sure what can be wrong syntaz wise and am really behind deadline now for this as client is wanting to sign off asap.
Many thanks!
Lauren
Hello laurena86,
Please send us an email at contact@tagdiv.com with your log-in information (wp-admin) so we can further inspect it closer your setup page. Also, please provide there the link on this topic so we can easily identify you.
Thanks for the message!
