Mobile version header problem

  • romulobortolozzo

    (@romulobortolozzo)


    4 years ago

    Hello people!

    I’m having trouble fixing a problem with a page template in the mobile version.

    I inserted a code so that in the mobile version the header image is automatically resized, however, with this code, the menu button is no longer opening. How can I fix it?

    Link example: [ redundant link removed ]

    The code used for the template is:

    <?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(), array( 1155, 450,true ) ); ?>

<style scoped>

.on-the-fly-behavior { background-image: url('<?php echo $image[0]; ?>'); background-position: center; background-size: cover; height: 649px; width: 100%; margin-top: 120px;}

@media (max-width: 767px)

.on-the-fly-behavior { background-image: url('<?php echo $image[0]; ?>') top center no-repeat; width: 100%; height: 250px !important; background-size: 556px; background-position: top center no-repeat; float: left; margin-top: 90px !important;}

}

</style>

<span class="on-the-fly-behavior"></span>
<div id="headerpage">

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator t-p

    (@t-p)

    4 years ago

    Mobile compatibility is theme-dependent.

    Please identify exactly which theme you are using and then post in that theme’s dedicated forum so the theme’s developers and support community can help you with this.

    Moderator bcworkz

    (@bcworkz)

    4 years ago

    Another element which is transparent is overlaying the menu button so that clicks on the button do not register. You need to bring its z-index up so that it’s on top. Try this added to the Additional CSS panel of the customizer:

    #navarea {
    z-index: 10;
    position: relative;
}
    Thread Starter romulobortolozzo

    (@romulobortolozzo)

    4 years ago

    @bcworkz It’s now oppening the menu, but the menu is overlapping the image header. What adjustment show I make? Thanks.

    Moderator bcworkz

    (@bcworkz)

    4 years ago

    Sorry, I don’t know how to fix that. Maybe make it more like the image header on other pages? They seem to work as you expect.

    TBH, I don’t see the current behavior as a flaw. It’s not unexpected for flyouts to cover content.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile version header problem’ is closed to new replies.