[Edwin]

Hi, on my website iglobal.net there is an issue with the header which is visible in Chrome browser for both mobile and desktop. It does not occur in Mozilla FF. There is a skipping or animated height adjustment right above the secondary header menu header when switching between pages.

For example, from the home page click on the learn more button in the slider and the header will change height during the transition to the new page. Then when you click back to the home page it happens and also when visiting other pages. I contacted the slider plugin developer and he cannot assist as it is not connected with the slider. However, he made the following suggestion:

“…your problem seems to be connected to that the height of your #masthead element changes and you have a transition: all .5s ease-in-out; property on it, which will make this change happen with an animation. If you would like to solve this problem, then I would rather suggest getting in touch with the developer of the theme where you menu is coming from.”

Can you send some CSS code to fix this? Thank you for your assistance. – Edwin

[Skandha]

@mmhgloba: Hello Edwin,
Do you want to remove the transition that you see on Google Chrome browser. If so try adding the following CSS Code.

#masthead {
    transition: unset;
}

Let me know if this works out!
Kind Regards,
Skandha

[Edwin]

Hi Skandha,

Thanks for the quick follow up. That worked great. I have one more request.

For my blog and blog posts I want to adjust the admin meta that appears on the blog category page and also at the top of the post. On the blog category page located here: https://goldenbuddha.net/category/buddhist-basics/ I want to insert “Posted on” before the date and “by” before the author name. I also want to put this on top of each individual blog post.

Also, on the blog category page I would like to remove the category meta below the post excerpt – “Nepali Buddhist Sculpture” – remove this. It is not necessary to reference the blog category because there is only one category.

Thank for your assistance.
Edwin

[Skandha]

@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.entry-meta {
    display: block;
    color: #000;
}

Let me know if this works out!
Kind Regards,
Skandha

[Edwin]

Thanks for that. Also, on the same website I want to adjust the logo size in the main header. I have tried to create my own code:

.image.custom-logo img {
max-height: 150px !important;
max-width: 70px !important;
}

but it does not work. I also found the code here on catchthemes forum but it does not work either. I think something is interfering…

.custom-logo {
max-width: 300px !important;
}

What is the correct code for this?

[Skandha]

@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

site-logo img {
    max-width: unset;
    max-height: unset;
}

Let me know if this works out!
Kind Regards,
Skandha

[Edwin]

Hi Skandha, thanks for the reply but it did not work. The actual size of the logo image is 150x60px but it is still set at 70x28px as displayed in google console. It should have adjusted larger when I inserted the css, but there is no change at all. Do you have another fix?

[Skandha]

@mmhgloba: Hello Edwin,
I missed a # before site-logo in the above. Can you try adding that and check if the original logo size shows up?

Let me know if this works out!
Kind Regards,
Skandha

[Edwin]

Hi Skandha, it worked great on desktop, but not mobile. Also, you may notice on desktop that the primary menu is a little out of alignment because the logo is bigger. Can it be adjusted? Thanks!

[Edwin]

Skandha, I think that in mobile, it is important to increase the size of the menu icons proportionally to the increase in logo size, otherwise it will look distorted. Thanks, Edwin

[Skandha]

@mmhgloba: Hello Edwin,
Can you please try replacing the above Code I provided you with Code below.

#site-logo img {
    max-width: unset !important;
    max-height: unset !important;
}

Also can you please elaborate the issue with the menu when the logo size is increased?
Kind Regards,
Skandha

[Edwin]

Hi Skandha, it looks much better, but I think it is too large and not proportional to the smaller screen. Is it possible to lower the size of the logo display in mobile? On Desktop it looks fine, I would like mobile to also be more proportional. Can you assist?

[Skandha]

@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width: 980px) {
	#site-logo img {
	    max-width: 100px !important;
	    max-height: 100px !important;
	}
}

Let me know if this works out!
Kind Regards,
Skandha

[Edwin]

Hi Skandha, thanks that worked very well. There remains two issues with the menus on both mobile and desktop. On mobile, the menu top border cuts off the bottom of the site logo, can the top border be set to auto adjust so it does not cut off the logo? Also, on desktop the primary menu is off center and leaves a larger white space beneath because of the larger logo size. Can we adjust it so it sits lower closer center? Thanks – Edwin

[Skandha]

@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#header-right .widget .menu a, #header-search-widget span {
    margin-top: 10px;
}

Let me know if this solves the issue.
Kind Regards,
Skandha

[Edwin]

Hi Skandha, it worked great on desktop. On mobile, it is not working. I tried inserting !important; into the code but no luck. Please have a look at it. Thanks – Edwin

[Skandha]

@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#header-mobile-menu-block {
    margin-top: 10px;
}

Let me know if this solves the issue.
Kind Regards,
Skandha

[Edwin]

Hi Skandha, I tried it and it is still not working in mobile.

[Edwin]

Skandha, Do you have another solution to try? Thank you – Edwin

[Skandha]

@mmhgloba: Hello Edwin,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#secondary-mobile-menu-block {
    margin-top: 10px;
}

Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts