[Help] Fixed menu header with sidebar

[YauKeng]

Hi, I'm new with Formantic UI.
I would like to have a non-fluid fixed menu on top for desktop view and togglea sidebar for smaller screen.
I'm using "fixed top sticky" to fixed the header position for the ui segment.
I'm expecting the top header position should always fixed, but when I open side bar, header no longer fixed.

I've tried to use fixed menu, but I'm not able to make it non-fluid, therefore I've to use the ui segment to wrap my header.

What I need:

1. Header always fixed top position.
2. Display hamburger icon on header to toggle sidebar for smaller screen.
3. Prefer the content scrolling by using browser scrollbar. (I saw a example, it using the content scrollbar itself, instead of browser scrollbar, can tell me what it that? Why I want to use the browser scrollbar is because when using mobile browser, I can hide the browser URL header when we scroll up, so can have better view. can the content scrolling doing the same?)

Question:

1. How to achieve my need?
2. As you can see on my jsfiddle, when I use "fixed top sticky" my content was hidden behind header, how to let start from the headers bottom? Am I missing something or I can only use the padding to offset it?

Please check me code:
https://jsfiddle.net/j6215pz7/3/

Thanks.

[jamessampford]

It sounds like you want to use the overlay transition https://fomantic-ui.com/modules/sidebar.html#transitions which will show the menu on top of the content, as opposed to pushing it?

[lubber-de]

If you don't want the custom scrollbars, you can disable them by

@useCustomScrollbars: false

in

Fomantic-UI/src/themes/default/globals/site.variables

Line 156 in 3f3045c

@useCustomScrollbars: true;

But you have to recompile fomantic for yourself then.

Otherwise try to override them manually in your CSS

::-webkit-scrollbar {
    all:unset;
}

See https://stackoverflow.com/questions/9060421/css3-how-to-restore-webkit-scrollbar-property-to-the-default-scroll-bar#answer-9060446

[YauKeng]

It sounds like you want to use the overlay transition https://fomantic-ui.com/modules/sidebar.html#transitions which will show the menu on top of the content, as opposed to pushing it?

Not really, I want a fixed header..
I already have a "fixed top sticky" header, but it loss position fixed when open sidebar.
you may open the jsfiddle then u get what i mean.

[jamessampford]

Take the fixed header out of pusher and all is fine - adjusted JSFiddle https://jsfiddle.net/1tLmq2v0/

May need to be looked at to have a fixed header within pusher though...

[YauKeng]

Take the fixed header out of pusher and all is fine - adjusted JSFiddle https://jsfiddle.net/j6215pz7/3/

May need to be looked at to have a fixed header within pusher though...

sorry, your JSFiddle not updated.

[jamessampford]

https://jsfiddle.net/1tLmq2v0/

[YauKeng]

https://jsfiddle.net/1tLmq2v0/

I need to place the vertical menu after header div to prevent see the content fade in, and set position top for vertical menu and content. looks ok now... Thanks..
updated: https://jsfiddle.net/L3saqxtn/1/

Last two question see if you can help?

1. As I said, I need to set the top position(70.84px) for menu and content, else it overlap in behind the header, is this the only way if I use sticky header? can't they auto position/place after the header div?
2. I saw an example, they have the scrollbar for the content/container itself instead of browser scrollbar. what is that? I can't find back the code. curious to know more. hehe

Thanks..

[YauKeng]

Hi @lubber-de
Do you have any idea why when closing sidebar, it will affect the "right floated" item? (item jump to right for a second)
Only happened in mobile mode (I've tried on my phone and google chrome device mode)

see my video:
https://res.cloudinary.com/myfoodkampung/video/upload/v1588155228/MyFoodKampung/pbkbywc9cjfi2jqvctvu.mp4

Code:
https://jsfiddle.net/4pqbne9v/
Can't simulate it on jsFiddle, but the code are totally same..

[jamessampford]

You may want to do have the sidebar close when the screen width resizes above the mobile width, otherwise you'll get the below:

[YauKeng]

You may want to do have the sidebar close when the screen width resizes above the mobile width, otherwise you'll get the below:

Yup, thank you..

But found another problem, see the post above or here
very troubled, this menu took me few days.