Materialize Navbar - Post ID 288284

User 486215 Photo


Registered User
79 posts

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.
Attachments:
User 122279 Photo


Senior Advisor
14,447 posts

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


User 187934 Photo


Senior Advisor
20,181 posts

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
User 52675 Photo


Ambassador
3 posts

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.
User 122279 Photo


Senior Advisor
14,447 posts

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.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 52675 Photo


Ambassador
3 posts

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.



Thats exactly what I mean, I was hoping the existing template sidebar inside Materialize would allow that kind of property change to allow that.
User 2885740 Photo


Registered User
60 posts

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é
User 2907842 Photo


Registered User
45 posts

Jacqueline Smith wrote:
*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/
Attachments:
User 52675 Photo


Ambassador
3 posts

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:
Jacqueline Smith wrote:
*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/
User 2907842 Photo


Registered User
45 posts

Jacqueline Smith wrote:
*snip

Bas wrote:
Jacqueline Smith wrote:
*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.