Comments (6)
Hi @ParalaX002,
You can achieve the same way like Bootstrap's documentation navbar with position: sticky
.
As you can see in the image above, try adding position: sticky
, top: 0
, z-index: 5
to the navbar. And if it doesn't work, try to add display: initial
to the parent element.
from mazer.
Hi, thanks a lot for your fast answer.
So it is now sticking, but I still have an issue: it is on the bottom or on the top of the sidebar. That is, either the sidebar "covers" the top bar, or the top bar covers the sidebar.
I've got this code (sorry I'm no html5 dev, so it might be really bad...)
<body>
<div id="app" style="display: initial">
<nav class="bd-subnavbar" style="position:sticky; top:0; z-index:5">
<div class="card">
Some stuffs
</div>
</nav>
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-menu">
from mazer.
Do you have any screenshot how it would look like?
from mazer.
Here it is if I set the bar bellow the sidebar:
Or, if I put it on top:
To put it on top, I add the class "sticky-top" to the "bd-subnavbar", like this:
<nav class="bd-subnavbar sticky-top">
As you can see, either the logo is dropped, or the begining of the sidebar. I can play with some margin and padding, but then it doesn't looks nice when I resize the window...
from mazer.
You can try to set a background to the navbar, and set a full width.
Another option:
If you need navbar in Mazer, you can take layout-vertical-navbar.html as reference.
The structure is to make navbar is like this:
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
// Sidebar items
</div>
</div>
<div id="main" class='layout-navbar'>
<header class='mb-3'>
<nav class="navbar navbar-expand navbar-light ">
// Your bootstrap navbar here
</nav>
</header>
// app content..
</div>
from mazer.
Hi, thanks for your help :)
I managed to get something, it's still not perfect because it is not resizing correctly to the content yet, but it'll do. Maybe it would be a good addition to create an example with both bars in your demo :)
Regards
from mazer.
Related Issues (20)
- Enhance: The Buttons in the Header Section Lacks Transition HOT 1
- Request extra component for flags country HOT 2
- Request cookie consent feature HOT 2
- How to disable dark mode when user first time go to my web? HOT 8
- TypeError: Cannot read properties of null (reading 'getBoundingClientRect') HOT 4
- Scroll of navbar doesn't render fully HOT 1
- Clicking a link in a multi-level menu will collapse it HOT 3
- Vertical-navbar bug on smartphone
- Vertical navbar Collapsable Menu not working HOT 7
- footer problem HOT 1
- [Bug] TinyMCE dark mode does not work HOT 1
- Error when using viettnamese language in latest version HOT 9
- Sidebar collapse is not working in Vertical Layout with Navbar HOT 18
- how to use Vietnamese language in template HOT 1
- Sidebar is printed HOT 3
- How to create a dynamic menu HOT 3
- Sidebar Hide in Default HOT 3
- Toggle Logo Sidebar by theme HOT 2
- Light / Dark toggle HOT 5
- Table Small doesn't work
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 mazer.