[Loare]

Hey everyone!

First off, thank you for all the work! It’s amazing how you are enabling artists to have a professional online presence! I’ve recently installed the Audioman Free Theme to test and out and to decide whether I would like the Pro Theme on my website, loaremusic.com. I am incredibly happy with it but would like to change three things.

I centered the primary menu bar, but now the menu button on mobile seems pretty out of place:

Is there a way to make the “Menu” button stay, after resizing? That would fix the issue. Also, is it possible to make the “Watch Now” Button wider/smaller, so it doesn’t line break after resizing?

The second thing is that the header media logo isn’t properly resizing on mobile. With my attempts it appears pretty small on mobile if I adjust it to desktop and appears huge on desktop if I adjust it to mobile.

The third thing might include too much coding, but is there a way to include custom header media logos for each page? So if the page is named “Intro” to have a header media logo specifically for that page, but a different header media logo for another page?

Best regards and thank you for all your work, Sam!

[Skandha]

@loare: Hello there,
Go to => Appearance => Customize => Additional CSS add the following CSS Code instead of the code you have added.
/* To center the menu on desktop */

@media screen and (min-width: 1200px) {
	.site-header-menu {
		margin: 0 auto;
	}
}
@media screen and (max-width: 1200px) {
	.site-header-menu {
		width:100%;
	}
}

The header media logo seems to look fine on both mobile and desktop screens without altering it with CSS Code.

It is not possible to have different header media logo on different pages. If you really need it I suggest you to hire a customizer to get it done.

Let me know if this helps you out!
Kind Regards,
Skandha

[Loare]

Thank you so much!

That definitely helped. For the Header Media Logo I think the logo is a bit to big for desktop, what would I need to put in so it has a max-width for desktop?

Best regards, Sam!

[Skandha]

@loare: Hello Sam,
To have a max-width for Header Media Logo on desktop
Go to => Appearance => Customize => Additional CSS add the following CSS Code.

@media screen and (min-width: 1200px) {
	.site-header-logo img {
	    max-width: 500px;
	}
}

You can change the min-width to decide from which dimension the CSS Code be applied. You can alter the max-width according to your choice as well.

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

[Loare]

@Skandha, thank you so much!

The only thing I am trying to figure out now is to remove the slight black transparent background. Is there a way to remove it?

Best regards, Sam!

[Skandha]

@loare: Hello Sam,
Go to => Appearance => Customize => Additional CSS add the following CSS Code.

.custom-header-overlay {
    background-color: unset;
}

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

[Loare]

@Skandha, that works perfectly! Thanks!

Is there a way to give the featured image on each page more space, meaning that they take up more height of the website? My images are a bit cut off and I would like to give them more space.

Thank you!

[Skandha]

@loare: Hello Sam,
Go to => Appearance => Customize => Additional CSS add the following CSS Code.

@media screen and (min-width: 85.375em) {
	body:not(.home) .custom-header-content {
		padding: 400px 50px;
	}
}

You can change the padding to adjust the height of header image on each page.
Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts