top nav not resizing for mobile and parallax image not resizing

[adventium]

Hi~

I’m having problems with the top nav in mobile view:
1. the hamburger menu is not showing
2. logo and book now button not resizing

Also, parallax images are not resizing for mobile.

Please help!

---

[Support]

Hello, my suggestion is to add the following css:

(css/custom.css)

@media (max-width: 991px) {
	#header.header-effect-shrink .header-logo {
		width: auto !important;
	}
	#header .header-logo img {
		max-width: 150px !important;
		height: auto !important;
	}
}

It will set the logo to 150px on mobile, you can reduce it even more if you want to.

Kind Regards.

---

[adventium]

Hi~

1. Is it possible to make the height of the mobile header shorter?
2. Is it possible to make the hamburger menu larger? (I changed font-size: 1.3rem on line 1925 in theme-elements.css, but nothing changed)
3. Please advise how to resize the images in parallax for mobile view (it’s being cropped so full image is not visible)

Thank you!

---

[Support]

1)
CSS (css/custom.css):

@media (max-width: 991px) {
	#header.header-effect-shrink .header-container {
		min-height: 75px !important;
	}
}

2)
CSS (css/custom.css):

@media (max-width: 991px) {
	#header .header-nav-main nav > ul li a {
		font-size: 15px !important;
		line-height: 20px !important;
		padding: 10px 8px !important;
	}
}

3)

parallax images not resizing for mobile

Parallax are set to cover (so the images are responsive and will crop. You need to change it to background-size 100% and change height, that’s the only way to do that.

—
My suggestion is to add a custom class, for example: “my-custom-parallax”

HTML:

<section class="my-custom-parallax parallax section section-parallax custom-parallax-bg-pos-left custom-sec-left h-100 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'horizontalPosition': '100%'}" data-image-src="img/BZImages/1920x1100Doc.jpg" style="min-height: 315px;">
</section>

And then customize CSS (css/custom.css):

@media (max-width: 991px) {
	.my-custom-parallax {
		min-height: 31vw !important;
	}
	
	.my-custom-parallax .parallax-background {
		background-size: 100% !important;
	}
}

Best Regards

---

[Author]

Posts