Sticky Header - Mobile not working / Type cut off / Lost bbpress button

TIrvine · December 31, 2017, 5:57pm

Hello

This is my second Pro license - so, first of all, thank you for making a great product!
Secondly, I’m having multiple issues with the Sticky Header.

My questions/problems are in bold, below. Please visit the subdomain I’m working from:

1 - Everything looks good on a desktop. BUT if you horizontally shrink your browser, the logo drops down a couple pixels lower, and my menu items (“Checklists Community Register”) disappear/cut off.
I need the menu items to change into the hamburger menu bar so I have a mobile friendly menu for phones/tablets/small browser windows.

2 - Next (staying on the home page and keep your browser window width small) if you scroll down, you’ll notice only “GET ACCESS” button eventually pops up. “LEARN MORE” doesn’t show up at all if you scroll down. You’ll notice this happens on a phone as well.
If you make your desktop browser window wide, “LEARN MORE” AND “GET ACCESS” buttons will both appear.

3 - Please visit this page: http://starwarscards.collects-it.com/forums/
The bbpress “chat bubble icon” is present in the menu. I need the bbPress icon to show up in the menu on all pages (including the front page). How can I get it to work with your Sticky Header? It disappeared as soon as I used Sticky Header. I need the functionality of bbpress with the forum search, favourites, subscription, profile (if you click on the chat bubble icon, you’ll see those submenus).

4 - Staying in the forum page, you’ll notice the Sticky Header is not assigning to this page. Can you please tell me how to fix this? I’ve globally assigned it to all pages and posts, but it doesn’t work for this page only.

Thank you so much for your help. I hope the fixes are simple. I’ve been playing around and looking for solutions, without any luck.

T

ruenel · December 31, 2017, 9:03pm

Hello There,

Thanks for writing in!

1.) Please edit your header and in your navigation inline element, find the customize tab. You will have to hide the element on specific screen sizes using the “Hide During Breakpoint” options.

To have a hamburger menu, you will need to add a navigation collapsed element. The same settings is needed, you will have to find the “Customize” tab and use the “Hide During Breakpoints” to make sure that this element will only display in smaller screens.

2.) This is because the “Learn More” button is hidden in smaller screens. Please edit the header and click this button. Find the “Customize” tab and make sure that this button element is displayed in all screen sizes.

3.) The forums page is using the default header. The bbPress bubble icon will only display in automatically in the primary menu of the default header. If you are using custom header, you will have to create a set of menu or edit your current menu of the custom header and add a bubble icon along with its sub menu.

4.) Somehow this is a bug of the custom header. At the moment, it can only be assign to pages, posts and products. It will not display in category or archive pages this would include the Forum page. Our developers is already made aware of this issue. It will be fixed and updated soon.

Please let us know if this works out for you.

TIrvine · December 31, 2017, 10:02pm

Awesome, thank you RueNel! The only problems that I’m having now are:

1 - When you scroll, the logo and the menu are overlapping weirdly and not “sticking” as they should.

2 - If you shrink your browser window (or view on a phone), you’ll see a white gap between the logo bar and the inline navigation bar.

About #4, i’m glad this will be fixed soon - thank you

Thanks again!
T

ruenel · December 31, 2017, 11:28pm

Hey There,

Thanks for updating in!

1.) You will have to adjust the top position of the other bar holding the mobile menu icon. It must be positioned at the bottom of the logo so that it will not overlap.

2.) The white space is a bar which does not display any of its contents. The visibility is hidden and this is why it is only a white space.

Hope this helps.

TIrvine · January 1, 2018, 12:25am

Hi RueNel,

1 - I was able to get the overlapping figured out… It had to do with the trigger offset and the shrink amount.

2 - If the contents for the bar is hidden, why does the empty bar gap not hide as well? Is there a way to fix this?
The goal is to have the menu only show up on desktops, and then change to the hamburger menu on mobile devices.

Thanks!
T

TIrvine · January 1, 2018, 12:30am

Hey RueNel,
Thank you so much for the help! I got it. Didn’t realize there was another bar hiding in there.
Thanks again!
Happy New Year
T

ruenel · January 1, 2018, 1:13am

You’re welcome!
Thanks for letting us know that it has worked for you.

Happy New Year Too!

TIrvine · January 1, 2018, 6:39pm

Hi RueNel,

I thought it was fixed, but it looks like I didn’t scroll down far enough.

Please take a look with the widescreen browser window (show full menu Checklists, Community, Register), and then shrink the width to mobile/tablet size. It’s still showing an empty space/gap.

If I hide the bar, the container, and the navigation on mobile device breakpoints, it gives me a gap.
If I show the bar only, it will fill in the space with the black background at least, but it looks awful with a big empty space between the logo and the hamburger menu.

Can you please help me with a solution? I would think that if you hide the bar and everything inside, that it shouldn’t leave a gap at all… but it is.

Thanks
T

rad · January 1, 2018, 6:59pm

Hi there,

Please use the Hide Breakpoints in your header bar for it to hide the entire header bar. Hiding the inner container or elements will only hide them leaving an empty header bar (hence gap). And you don’t need to do that on every element, just do it with your header bar and it should be enough to hide the entire bar including its elements.

Thanks!

TIrvine · January 1, 2018, 7:02pm

Hi Rad,

It’s still giving me a gap.
I have the bar hidden for mobile. I unhid the other elements inside the bar. Still have the white gap…?

Thanks,
T

rad · January 1, 2018, 7:14pm

Hi there,

Oh, I’m not seeing any white gap, but grey gap due to header bar. Please provide a screenshot as it may look different on my end.

Thanks!

TIrvine · January 1, 2018, 8:53pm

Hi Rad,

Here’s the screen shot.
Thanks
T

TIrvine · January 1, 2018, 8:54pm

Not a white gap, sorry… but empty space. You can see the type scroll between the hamburger icon and the logo bar

lely · January 2, 2018, 1:59am

Hi There,

Thank you for the screenshot. Unfortunately, this is a known issue when using multiple sticky headers. It was already forwarded to our developer. See this:

TIrvine · January 2, 2018, 2:52am

Thanks Lely

How long ago were the posts? I have a bit of a tight deadline that I’m working with. Is there an estimated time frame that the sticky header and my #4 issue (in my original post) will be fixed?

I’m running into another issue… Hopefully this one can be fixed easily ;)… When I add a section, I can’t make the background colour stretch across the width of the browser. It seems to be stuck/boxed in no matter what. I’ve made sure everything was set to widescreen and tried changing the layouts in pages.

If I use a template (classic element “Features: 3 columns”), I’m able to change the background to the light grey as shown on the homepage. But, in the Checklist page, I cannot get the background to stretch the entire width.

I’m really appreciating everyone’s quick responses - great customer service! Thank you

T

TIrvine · January 2, 2018, 3:42am

Sorry… back to the bbpress chat bubble.

In RueNel’s answer…

3.) The forums page is using the default header. The bbPress bubble icon will only display in automatically in the primary menu of the default header. If you are using custom header, you will have to create a set of menu or edit your current menu of the custom header and add a bubble icon along with its sub menu.

Where I have the word “Register” in the menu, how can I make that word show up as an icon instead?
…so, the menu should be:
“checklists community (icon)”

Thanks,
T

paul.r · January 2, 2018, 5:36am

Hi,

Under Appearance > Menu you can directly add the icon code as Navigation Label

eg.

<i class="x-icon x-icon-user" data-x-icon="&#xf007;" aria-hidden="true"></i>

You can get your icon name and unicode from the link below

http://fontawesome.io/cheatsheet/

Hope that helps.

TIrvine · January 2, 2018, 5:23pm

Hi Paul,

Ok. I tried that yesterday but didn’t think it was working because the code showed up in the preview instead of an icon. I tried it again, and it works.

But…instead…is it possible to just have the bbpress comment icon working so that it doesn’t disappear when assigning sticky headers?

I don’t know how to get the same options to work as a submenu. The items in the submenu don’t exist as pages or posts.

TIrvine · January 2, 2018, 5:15pm

Any idea how to fix this issue posted above…?

When I add a section, I can’t make the background colour stretch across the width of the browser. It seems to be stuck/boxed in no matter what. I’ve made sure everything was set to widescreen and tried changing the layouts in pages.

If I use a template (classic element “Features: 3 columns”), I’m able to change the background to the light grey as shown on the homepage. But, in the Checklist page, I cannot get the background to stretch the entire width.

Thanks again!
T

paul.r · January 3, 2018, 2:16am

Hi,

You can also add those as custom links.

To make section full width

Select a No Container Template under Page Attributes

Hope that helps.