• You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

Looking for a bit of help debugging my header on wordpress

xeric

Member
Apr 5, 2019
98
25
18
Hey everyone.

I'm facing kind of a weird issue and was wondering if someone could help me out to narrow down what's causing it.

My header appears fine on desktop, and fine on mobile.

1614143049341.png

1614143101243.png

But while resizing the browser, there is one point where not even desktop header shows and not even mobile header shows.

1614143157593.png


I tried to look for what's causing it using the inspector tool but I seem to be stuck and can't find the cause of the problem. I would appreciate any help in narrowing down the cause because it's driving me mad.

Theme being used is Astra. If you want the URL so you can check it out yourself, it is fenice-wine.com

Thanks for any help
 
Have a look at your breakpoints set in Astra theme. From the inspector I think your breakpoint is 'tablet' but what are the corresponding pixel values?

You probably already know this, but the desktop header disappears below 939px and mobile header appears below 922px. Which, by the way, are a bit uncommon breakpoints.
 
  • Love
  • Like
Reactions: xeric and TassieNZ
Have a look at your breakpoints set in Astra theme. From the inspector I think your breakpoint is 'tablet' but what are the corresponding pixel values?

You probably already know this, but the desktop header disappears below 939px and mobile header appears below 922px. Which, by the way, are a bit uncommon breakpoints.

Okay so reading the Astra docs, it seems that they are the ones who had set the breakpoints of 921.

The solution they have for changing these is adding php to the child theme's functions.php


Not too proficient with php but I should be fine with slight copy paste modifications.

I should just use this code below, correct?


// Update your custom tablet breakpoint below - like return 921;
add_filter( 'astra_tablet_breakpoint', function() {
return 938;
});
 
What Astra provides here is quite confusing in my opinion. They make a difference between new users and existing users, and then breakpoints set by them and by a page builder, and on top of that a breakpoint set in the Customizer's Primary Menu (or is that last one gone now?). Wow.

I would start by checking whether there are custom breakpoints in your page builder Elementor, and if so, set them to the same value as Astra's. If that's not the case then you can go for the provided code.
 
The elementor breakpoint for tablets was set to 1025. I tried setting it to both, 921 (astra default) and 938 (because its the value i put in the php snippet)

I added the above code to my child's .php but it still isn't working. Also, there appears to be no control of the breakpoints through customizer.

This really is driving me mad
 
This is so weird.

I put in this code now,

/**
* Change the breakpoint of the Astra Header Menus
*
* @return int Screen width when the header should change to the mobile header.
*/
function your_prefix_change_header_breakpoint() {
return 938;
};

add_filter( 'astra_header_break_point', 'your_prefix_change_header_breakpoint' );


and if I open up responsive mode through the inspector tool and manually adjust the device width by pressing the up key, it switches perfectly. Showing mobile header all the way up to 938, then switching to desktop header at 939.

However if i close the responsive mode and just try to adjust my browser width instead, there's still that one gap where it just disappears.
 
That 938px breakpoint intrigues me, because it seems that was active already (see my first post), but it is no value set by Astra nor Elementor. That's why there was/is the gap in between 921 and 938. So it must have been set somewhere.
 
and if I open up responsive mode through the inspector tool and manually adjust the device width by pressing the up key, it switches perfectly. Showing mobile header all the way up to 938, then switching to desktop header at 939.
But it changes position slightly when you go from 921 to 922, so it's not exactly right.
 
Okay same thing. Its working fine if i adjust it pixel by pixel in the responsive mode. switches from 921 to 922. But still disappears if i adjust by dragging browser width. Nothing happens at 938 now
 
Doesn't seem to have fixed it. I even tried to search for "938" in the astra theme folder but didn't get any meaningful results besides this one line in a file called astra.pot but I don't think this means anything

#: inc/addons/transparent-header/classes/sections/class-astra-customizer-transparent-header-configs.php:938
 
When I resize the browser to the point where no menu is visible and then do a refresh, the desktop menu briefly appears and then disappears. Which says to me it's probably a custom setting somewhere (maybe in CSS, but not necessarily). Since the 938 breakpoint is your own preference, I'm quite sure it must be somewhere. Maybe in the header builder?
 
938 wasn't my preference I was just using that because that the breakpoint that it started disappearing at.

Also I haven't set a breakpoint of 938 anywhere. I even removed all custom CSS but it's still the same.

Also just went through the header builder again. Header builder doesn't even allow you to set breakpoints inside it anywhere

What's weird is that if it was mentioned anywhere in the theme files, it should have surely turned up in the search I did for "938" in all Astra files
 
If it were being caused by CSS im sure it would be easy to narrow down using Inspector but that doesn't seem to be the case either
 
OMG I FINALLY FOUND IT.

It is CSS doing it lmao. In the frontend.min.css file #ast-mobile-header display is set to none but if you go below 921 px then it shows up and the display is set to block.

But now to find out what's causing this behavior. Could it be javascript or something?

okay so this is the code that's causing this entire headache.

#ast-mobile-header{display:none}.ast-header-break-point #ast-desktop-header{display:none}.ast-header-break-point #ast-mobile-header{display:block}

I guess i need to hunt down what this .ast-header-break-point class is and where it's getting its value from
 
  • Love
Reactions: TassieNZ
If I add this snippet back in, it disappears from 938 to 955 which is the exact same 17 px gap between 921 and 938

/**
* Change the breakpoint of the Astra Header Menus
*
* @return int Screen width when the header should change to the mobile header.
*/
function your_prefix_change_header_breakpoint() {
return 938;
};

add_filter( 'astra_header_break_point', 'your_prefix_change_header_breakpoint' );
 
Haha, I had just found that, too. If you look at the console you can see that by dragging the browser the section with id 'desktop-header' disappears and the section with 'mobile-header' comes into place at 938. However, when changing the width in responsive mode that is only happening at 921.

Now of course the question: why is this happening? Could it be ... the scrollbar?
 

Forum statistics

Threads
78,850
Messages
1,127,537
Members
246,526
Latest member
bingodz
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock