Home › Forums › WoodMart support forum › Header responsive issue

Header responsive issue

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • July 5, 2019 at 1:18 pm #131485

    lacasadelmarketing
    Participant

    Hello,

    I created my menu, but I am having a problem with responsiveness.

    On desktop, it works ok, but when I shrink the browser screen to less than 1024px width I get a large white space under the header.

    This is the CSS that is causing it:
    <header class=”whb-header whb-sticky-shadow whb-scroll-slide whb-sticky-real whb-hide-on-scroll whb-sticky-prepared” style=”padding-top: 140px;”>

    That padding-top:140px doesnt change to 60px when making the browser window smaller.

    Can you please help me.
    Thank you

    July 5, 2019 at 3:49 pm #131504

    Elise Noromit
    Member

    Hello,

    The header switches to the mobile view on this point 1024px.

    Please navigate to Woodmart > Header builder http://prntscr.com/iyd2pe

    Switch to the mobile view of your header http://prntscr.com/iyd3v3 check all the rows there.

    Hide the rows which are not applied https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

    Best Regards

    July 5, 2019 at 9:19 pm #131543

    lacasadelmarketing
    Participant

    I am sorry, but this doesnt solve the issue
    My header is built correrctly, but the theme code is adding 140px height when it should not add it.

    July 6, 2019 at 6:52 am #131551

    Elise Noromit
    Member

    Hello,

    Please provide your site admin access so that I could check the settings.

    Best Regards

    July 6, 2019 at 8:45 pm #131625

    lacasadelmarketing
    Participant

    I am sending you the admin details.

    That white space the header creates on the bottom with 140px is visible if you make the browser window smaller, and also on tablets.

    Not sure why it happens.
    In desktop with the browser smaller, if you reload the website changes from 140px padding-top to 60px, but that doesnt happen in tablets, its always visible.

    I am guessing the theme is adding that 140px padding-top using AJAX, but instead of rewriting the padding-top to 60px when the browser screen is smaller, it keeps the 140px until you reload again. It should be dynamic, and change that padding-top on the fly depending on browser width.

    THANK YOU!

    July 7, 2019 at 4:14 pm #131660

    Elise Noromit
    Member

    Hello,

    You are narrowing the browser to the iPad size. As soon as you make the window narrow, reload the page or check the site on real devices. You will see that there is no problem.

    Best Regards

    July 7, 2019 at 4:23 pm #131662

    lacasadelmarketing
    Participant

    I understand what you are saying, but users sometimes make the browser window smaller to fit other windows on screen.
    The problem is that in your demos, that doesn’t happen. Only on my website.

    Also, on the iPad pro 13inches that space is always visible, even after reloading.

    July 7, 2019 at 5:10 pm #131669

    lacasadelmarketing
    Participant

    For example, in this demo that problem is not visible:
    https://woodmart.xtemos.com/demo-digitals/demo/digitals/

    July 7, 2019 at 5:42 pm #131678

    Elise Noromit
    Member

    Hello,

    I do not see any problem https://prnt.sc/obrgoz

    We have tested also on the Ipad, please provide the screen from the real devices.

    Best Regards

    July 7, 2019 at 5:52 pm #131681

    lacasadelmarketing
    Participant

    No, un your demo their is no problem. Only on my website. That is what is so strange.

    Did you test in iPad 13 inches?

    July 8, 2019 at 6:54 am #131723

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Mobile/Tablet:

    .whb-header.whb-sticky-real {
    padding-top: 60px!important;
}

    Best Regards

    July 8, 2019 at 9:38 am #131768

    lacasadelmarketing
    Participant

    OK,
    I found the problem.
    In the header builder, if I deactivate stickiness, the header works perfect, with no issues on desktop or tablet.
    If I activate Stickiness that big white space is visible.
    So, there has to be a problem with how the theme makes the header sticky.

    The code you sent me, solves how the header works on vertical view on tablet, but when you switch to horizontal the header overlaps the content, so it fixes something, but it breaks something else.

    I am attaching 2 images, one with the header option “sticky” activated, and one without.

    July 8, 2019 at 9:53 am #131771

    lacasadelmarketing
    Participant

    Found the problem.
    The issue with the header builder, is that if you set a different height for the row when its sticky, the theme still uses the padding-top from the original header height, instead of changing it to the padding-top it needs from the height you specify in the option “Row height on sticky header”.

    July 8, 2019 at 10:48 am #131777

    lacasadelmarketing
    Participant

    Found solution, This fixes your header problem:


    @media     only screen and (max-width: 1024px) {
    .whb-header {
    margin-bottom: 40px!important;
    }
    .whb-header.whb-sticky-real {
    padding-top: 100px!important;
    }
    }

    The problem, is that the space alocated for the header-bottom in the header builder, is not substracted in the CSS, so the theme hides that header-bottom but it leaves a white space that is equal to its height.

    July 8, 2019 at 2:28 pm #131821

    Elise Noromit
    Member

    Hello,

    Please provide your site admin access.

    Best Regards

    July 8, 2019 at 6:56 pm #131854

    lacasadelmarketing
    Participant

    here they are

    July 9, 2019 at 7:00 am #131896

    Bogdan Donovan
    Keymaster

    Hi,

    Try to remove all previous header related custom code and add the following CSS code snippet to the Global Custom CSS area.

    .whb-header.whb-sticky-real.whb-sticky-prepared {
	padding-top: 140px !important;	
}

@media only screen and (max-width: 1024px) {

.whb-header.whb-sticky-real.whb-sticky-prepared {
	padding-top: 100px !important;
}
}

    Regards

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)