Comments (5)
Hi @micartey, that is expected behavior as below a certain breakpoint the navigation is only available via the mobile burger menu (top right side of the header). In order to set that you need to add some markup that handles the mobile flyout and its contents.
Maybe the code examples here will be helpful to you as a reference https://github.com/telekom/scale/blob/main/examples/telekom-header-samples/
from scale.
Hi @felix-ico,
thank you for responding and providing me with the source code.
By the example I referenced in the issue, I was expecting this behavior by default considering that the examples that show the snippets all have the mobile burger menu without providing a mobile-nav-flyout
.
Apart from that, is there a straightforward way to hide the burger menu on above the certain breakpoint you mentioned? As of now, the website shows the burger menu the whole time which works for now, but is not necessarily nice.
from scale.
Hey @micartey
By the example I referenced in the issue, I was expecting this behavior by default considering that the examples that show the snippets all have the mobile burger menu without providing a mobile-nav-flyout.
If you mean the examples shown on the storybook page https://telekom.github.io/scale/?path=/docs/components-telekom-brand-header-navigation--standard-header - the decision made at the time of release was to NOT provide a full code snippet in the storybook page because that would have made the documentation page too bloated due to large amount of markup needed for a "complete" header...that's why we added the full examples in the repository itself to provide some guidance.
to hide the burger menu above a certain breakpoint we use css in the examples (https://github.com/telekom/scale/blob/main/examples/telekom-header-samples/standard/styles.css)
@media screen and (min-width: 1040px) {
.burger-item {
display: none;
}
}
from scale.
Hi @felix-ico,
Thank you for your kind response.
The issue is resolved and can be closed now.
I would, however, recommend updating the storybook and adding the media query by default. I can imagine this being an issue many people might have.
Another enhancement might be an automatic burger-item. The current solution forced me to add all nav-items twice. There might be a better way to do this 🙂
from scale.
@micartey thanks for the advice, i am guessing it was built this way to allow more flexibility: some people may want to have a burger menu even on desktop, or different menu setups/structures on desktop vs mobile. Anyway if this same issue comes up for more users we'll push an update
from scale.
Related Issues (20)
- [Tab Navigation]: Programatically enabling tab does not work HOT 6
- Scale-Table: sorting indicator not added when adding new column
- Problems with the Installation of telekom-scale with angular HOT 9
- Text Field inner colors remain inverted after autofill HOT 1
- NextJS with 'use client', StaticSiteGeneration and output: export HOT 1
- Error in icon navigation after scale update HOT 1
- customizable link cells in data grids
- Error in light mode HOT 3
- Less unique files for Standalone-UMD builds HOT 2
- Stacking modal dialog cause problem with scroll page HOT 7
- Scale Telekom Header doesn't close when not hovering above it anymore HOT 1
- scale-dropdown-select throws JS error if name attribute contains dot symbol. HOT 3
- [Tab Navigation] Programmatically select tabs
- @types/react mismatch
- ScaleDropdownSelect does not close when clicking on another one HOT 1
- scale-text-field not focus when invalid
- Tooltip placement is not correct
- Test automation limitations related to data-qa and hydrated classes
- Data Grid's Select Cell not reacting to "scaleEdit"-Event HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scale.