WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 24.02.2020 04:02:50

losttrip
Mitglied

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 07: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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 24.02.2020 23:40:56

losttrip
Mitglied

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?

Beitrag geändert von losttrip (25.02.2020 01:02:12)

Offline

#4 25.02.2020 00:34:15

boeseroeser
Gast

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 01:06:16

losttrip
Mitglied

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

boeseroeser schrieb:

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 10: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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#7 25.02.2020 10: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%;
}

Beitrag geändert von dev4me (25.02.2020 10:37:00)

Offline

#8 25.02.2020 23:16:45

losttrip
Mitglied

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

dev4me schrieb:
[== 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

Fußzeile des Forums

up