Materialize Navbar - Post ID 288199
Here's a navbar for the Materialize Framework:
http://tjrdevelopment.org/Materialize%20Navbar/
This navbar was made from an example in the Materialize documentation:
https://materializecss.com/navbar.html
The links were changed to addresses for my domain cover site and some SD video/audio examples I made.
The first navbar row was constructed by translating the example HTML to SD elements. The second row is from the actual example HTML itself. I have tried to made the two rows look exactly alike.
Attached is a .zip with the .rsd and exported HTML.
Modify the example in any way you want for your own needs.
http://tjrdevelopment.org/Materialize%20Navbar/
This navbar was made from an example in the Materialize documentation:
https://materializecss.com/navbar.html
The links were changed to addresses for my domain cover site and some SD video/audio examples I made.
The first navbar row was constructed by translating the example HTML to SD elements. The second row is from the actual example HTML itself. I have tried to made the two rows look exactly alike.
Attached is a .zip with the .rsd and exported HTML.
Modify the example in any way you want for your own needs.
Thanks for sharing! I haven't yet started messing with Materialize, but I will study your file and see if it seems easy enough for an old brain like mine.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
looks cool
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Im new to working with Materialize, I'm wondering, is there a way to make that side bar menu always work the way it does for smaller screens (Popping from left side on click) instead of staying static for wider PC browsers? Thanks.
Do you mean a menu like this: https://eikweb.com/sharing/side-nav/index.html ?
This was not created with Materialize, but it shouldn't be any problem making one.
This was not created with Materialize, but it shouldn't be any problem making one.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger wrote:
Do you mean a menu like this: https://eikweb.com/sharing/side-nav/index.html ?
This was not created with Materialize, but it shouldn't be any problem making one.
Do you mean a menu like this: https://eikweb.com/sharing/side-nav/index.html ?
This was not created with Materialize, but it shouldn't be any problem making one.
Thats exactly what I mean, I was hoping the existing template sidebar inside Materialize would allow that kind of property change to allow that.
Hi Jacqueline,
is this what you are looking for: https://materializecss.com/sidenav.html ?
Or rather something you build yourselve, like this: https://galeriemeile-gelsenkirchen.de/ ?
To make the mobile menu in this last example visible on larger screens too, I would only have to remove the materialize class "hide-on-large-only" and add the class "hide" to the navbar, used on larger devices.
Regs,
René
is this what you are looking for: https://materializecss.com/sidenav.html ?
Or rather something you build yourselve, like this: https://galeriemeile-gelsenkirchen.de/ ?
To make the mobile menu in this last example visible on larger screens too, I would only have to remove the materialize class "hide-on-large-only" and add the class "hide" to the navbar, used on larger devices.
Regs,
René
Jacqueline Smith wrote:
*snip*
*snip*
My website located in the signature, highlights the use of the sidenav. If this what you're possibly referring too. I've created a little demo that features the use of the 'sidenav-fixed' class. Which simply means, the the sidenav will stay open at all resolutions above 600px.
I made a class called ' pushed-wrapper'. This class has specific breakpoints to know when content with this class should have a margin of 300px.
Attached is a zip file that has the exported project, and the .rsd file (V4)
Demo:
http://basnash.space/demo/sidenav-fixed/
This was very helpful, thanks for the demo that I was able to use with materialize. ( export .zip for materialize). made it easy for me to see ). I am trying to control when that side bar opens, I need it to only open for larger screens, stay longer in Mobile mode. Then just slide out for larger desktop screens, is that in maybe a class somewhere, or some other setting ?? Thanks a lot for any help.
Bas wrote:
My website located in the signature, highlights the use of the sidenav. If this what you're possibly referring too. I've created a little demo that features the use of the 'sidenav-fixed' class. Which simply means, the the sidenav will stay open at all resolutions above 600px.
I made a class called ' pushed-wrapper'. This class has specific breakpoints to know when content with this class should have a margin of 300px.
Attached is a zip file that has the exported project, and the .rsd file (V4)
Demo:
http://basnash.space/demo/sidenav-fixed/
Jacqueline Smith wrote:
*snip*
*snip*
My website located in the signature, highlights the use of the sidenav. If this what you're possibly referring too. I've created a little demo that features the use of the 'sidenav-fixed' class. Which simply means, the the sidenav will stay open at all resolutions above 600px.
I made a class called ' pushed-wrapper'. This class has specific breakpoints to know when content with this class should have a margin of 300px.
Attached is a zip file that has the exported project, and the .rsd file (V4)
Demo:
http://basnash.space/demo/sidenav-fixed/
Jacqueline Smith wrote:
*snip
*snip
Bas wrote:
*snip
Jacqueline Smith wrote:
*snip*
*snip*
*snip
I've updated http://basnash.space/demo/sidenav-fixed/ with an additional page http://basnash.space/demo/sidenav-fixed/sidenav.html
Showcasing the differences between 'sidenav-fixed' and 'sidenav'.
Adding 'sidenav-fixed' to an element that already has the 'sidenav' class. Makes it visible by default at higher resolutions. While at the same time. Lower resolutions still need to use a toggle to make this element visible.
http://basnash.space/demo/sidenav-fixed/sidenav.html/ features how the class 'sidenav' functions without the addition of 'sidenav-fixed'. The element ID 'demonav-1' now only uses the class 'sidenav'. Which by default will always been hidden.
Meaning that it's up to you to make the toggle to call the side navigation menu into view.
Simply add the class 'sidenav-trigger' to any clickable element (text-link, btn-link, link-container,etc). Then on the elements panel. You choose the element you gave the class 'sidenav-trigger' to, and set its data attribute to data-target: demonav-1
Hopefully this clarification makes sense ( personal problem doing the exact opposite)
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.