WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 24.02.2020 05:02:50

losttrip
Member

Mobile Nav Dropdown doesn't push miniHero Background image down

I know it's a wordy Subject, but I am not sure what element is causing this issue.  I have inspected everything from the template to the miniHero module, and can't seem to figure out why this occurs, or more to the point, why it doesn't occur.

I am working with the template "lesefaken"
I have a miniHero div section directly below the nav div in my html.  When the mobile version of the menu (hamburger) drops down, the miniHero overlay and text are pushed down (along with the rest of the page elements), but the miniHero background image stays in place.  This causes an undesirable effect.  I searched and found this template on https://wbce.at/tpls/ and if you click the "Subpages" link (once on desktop view, twice on mobile view) you will get the miniHero section below, and you can recreate what I am talking about.

My project is local, so I can't share it here.

These are screen shots from the  https://wbce.at/tpls/ example page:

cd7f4f701aac2acab058f914e0bfef63.png

and now see what happens to the overlays when the menu drops:

295da0d832be99565bf8fee888c30646.png

Thank you for any assistance.

Offline

#2 24.02.2020 08:04:03

florian
Administrator

Re: Mobile Nav Dropdown doesn't push miniHero Background image down

I think it's an issue with the sticky script. Try to remove the lines

<script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/assets/jquery.sticky.js"></script>

and

<script>
if (window.innerWidth >=960) {
    $(window).load(function(){
      $("#main-nav").sticky({ topSpacing: 0 });
    });
}
  </script>

from the template. The navigation bar will then scroll out of focus, but I vaguely remember that I ran in similiar issues  too and after all that was the only solution.

Offline

#3 25.02.2020 00:40:56

losttrip
Member

Re: Mobile Nav Dropdown doesn't push miniHero Background image down

I tried that, but no change.  I am not sure why the sticky script would affect this, as there is no sticky nav on mobile (hamburger), it's only above 960px wide viewport.

I think it has more to do with how the miniHero parallax is implemented.  I'm not suggesting there is something wrong with how it works, just that it results in this issue.

I looked at the source code and I see the following as the first thing in the body (above the header, nav and miniHero section):

<body>
<div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(0px, 157.8px, 0px); height: 382px; width: 926px;">

<img class="parallax-slider" src="http://localhost:4001/mysite/media/minihero/image-20.jpg" style="transform: translate3d(0px, -94.68px, 0px); position: absolute; height: 477px; width: 926px; max-width: none;"></div>

Could this placement have anything to do with this issue?

Last edited by losttrip (25.02.2020 02:02:12)

Offline

#4 25.02.2020 01:34:15

boeseroeser
Guest

Re: Mobile Nav Dropdown doesn't push miniHero Background image down

Its simple: The image has position:fixed - relative to the body.
The box is NOT fixed.
Solution: Use another (higher) image.

#5 25.02.2020 02:06:16

losttrip
Member

Re: Mobile Nav Dropdown doesn't push miniHero Background image down

boeseroeser wrote:

Its simple: The image has position:fixed - relative to the body.
The box is NOT fixed.
Solution: Use another (higher) image.

Might be simple to you.  It's not to me.
What do you mean by "Use another (higher) image".

Offline

#6 25.02.2020 11:03:27

florian
Administrator

Re: Mobile Nav Dropdown doesn't push miniHero Background image down

Increase the image dimensions (same width, larger height), or maybe it could also help to alter the height settings of the minihero module accordingly.

Offline

#7 25.02.2020 11:32:37

dev4me
Developer

Re: Mobile Nav Dropdown doesn't push miniHero Background image down

The menu ( <nav> ) is positioned relative. This will push all other content down when it is expanded.
The text part is normal content and will be pushed down as well. (The parallax image is positioned absolute to allow the scrolling and is not affected)

You can solve this by positioning the <nav> absolute.
To make it full width add the width parameter as well.

So in template.css find the "nav" selector and add the position and width lines like this:

[== CSS ==]
nav {
    background-color: #d0deed;
    display: block !important;
    z-index: 100;
    position: absolute;
    width: 100%;
}

Last edited by dev4me (25.02.2020 11:37:00)

Offline

#8 26.02.2020 00:16:45

losttrip
Member

Re: Mobile Nav Dropdown doesn't push miniHero Background image down

dev4me wrote:
[== CSS ==]
nav {
    background-color: #d0deed;
    display: block !important;
    z-index: 100;
    position: absolute;
    width: 100%;
}

Thank you, this will work.

I liked the way the menu pushed the page down, but losing that effect is a price worth paying so that I can use the miniHero module with parallax.  Alternatively, I may lose the parallax effect, which eliminates this issue as well.

Offline

Board footer

Powered by FluxBB

up