Header logo & menu styling

[costin]

Hi,

1) On goo.gl/MNKX5h I’m using header type 6. The logo height is 70px. The sticky header resizes just 3-4px. If I’m writing a numerical value in Logo Resized Height (60px for example) the logo gets distorted.
How can I resize the logo when header resizes please? It seems that on this website is working http://www.goldair.info/

2) If I’m trying to reduce the logo top and bottom spacing again the logo gets distorted and the spaces remain the same. Any clues why it behaves like this please?

3) As my header height is now bigger than usual in Dante, the submenus are a little bit higher than it should be. Just click on one of my submenus or check the image attached. How can I fix this please?

4) How can I please transform the menu font in bold? (the submenu should remain the same)

Thank you!

[Tahir – SUPPORT]

Hi,
Please set the height in the theme options use only numeric value . Dont put ‘px’ in theme. Also please remove any custom css you have added . It should resize the submenu etc automatically.

Thanks
Tahir

[costin]

Hi Tahir,

Thank you for your reply but unfortunately it doesn’t answer my questions. From the beginning I’ve used just numeric values!

And why should I remove the custom css? The code is there to fix other issues I’ve had or to improve/style the theme, code usually received from Ed.

So, it would be nice to have some straight answers!

Thank you!

[Kyle – SUPPORT]

Hi Costin

The logo width setting was causing the width to stay at 266px even when resized. I have removed the value from the settings and it now works.

I will inform Ed of this bug and we will hopefully have a fix for a future update.

– Kyle

[costin]

OK, thanks!
If you leave 70 the normal height and 60 the logo resized height you can scroll down and the logo is resizing. After you come back the logo is not taking his normal size, it’s smaller, and blurred. Can you test please?

Do you have a bit of time to investigate questions 2,3 and 4 please?

Many thanks!

[Swift Ideas – Ed]

Hi Costin,

I’ve added an option for logo resized width in the next update, so that you can set the size for the smaller version. Checked and it looks good on your site now?

2) Can you let me know how you’re doing this? You want to reduce the padding around the whole header? Or just position the logo?

3) Can you provide a link to this site, I’ll check it.

4) Sure, just add this custom css:

nav#main-navigation .menu > li > a {
font-weight: bold;
}

– Ed

[costin]

This reply has been marked as private.

[Swift Ideas – Ed]

Still deliberating over the cut off point for the next update. I’m hoping to get everything included that I want for the end of next week, and it will be v2.0. I may have to release an interim update though. Tough to say when as I’m moving house this weekend, so things are a little hectic.

2) Try setting the width in the theme options, then adding some custom css for the resized width:

.sticky-header-resized #logo img {
width: 200px; /* change this to suit the logo */
height: 60px;
}

3) Sure, try this custom css:

#header-section.header-6 #header, #header-section.header-6 #header.sticky-header.sticky-header-resized {
padding-top: 8px;
}

– Ed

[costin]

This reply has been marked as private.

[Swift Ideas – Ed]

Unfortunately not me, but Kyle should be around. Will be back online Monday/Tuesday.

2) They have the height set for both, but no width. Are you using a PNG file for the logo?

3) This was related to that. I don’t see this code added? Also add this:

#header-section.header-6 #header.sticky-header.sticky-header-resized {
height: 76px;
}

Hope that helps.

– Ed

[costin]

This reply has been marked as private.

[Tahir – SUPPORT]

Hi,
Please update to version 1.51 . Also there are logo width and height settings in the Theme Options . Setting it there you should not have any problems.

Let us know.

Thanks
Tahir

[costin]

Hi Tahir,

Please, let Ed reply to this as I already have 1.5.1 and the problem is more complicated than it appears. And anyway my topic has several issues unsolved…

Thank you!

[Swift Ideas – Ed]

Hi Costin,

Let’s try this custom css for the logo, appears that the browser is not correctly resizing it on return to normal size (with no width/height settings set):

#logo img {
width: 233px;
height: auto;
}
.sticky-header-resized #logo img {
width: 166px;
}

For the menu, try:

nav#main-navigation .menu > li {
padding: 0 10px 32px;
}
nav.mega-menu li .sub-container {
top: 74px!important;
}
.header-6 .is-sticky .sticky-header-resized #main-navigation .menu > li {
padding: 0 10px 14px;
}
.is-sticky .sticky-header-resized nav.mega-menu li .sub-container, .header-6 .is-sticky .sticky-header-resized nav.mega-menu li .sub-container, .header-7 .is-sticky .sticky-header-resized nav.mega-menu li .sub-container {
top: 52px!important;
}

Hope that helps.

– Ed

[costin]

This reply has been marked as private.