Nav bar as part of milligram?

[alexjj]

Love the look of this framework, great job!

Upon trying it out I realised that the nav bar that's part of the homepage isn't actually part of milligram. Actually, a few things of the homepage aren't part of milligram. It was easy for me to add it to my project, but are there plans to incorporate it as part of milligram?

[hiroppy]

The idea is great but my intention is to keep the Milligram as light as possible, supporting the feature minimum necessary to initialize a project. BTW, what you are proposing would be a very specific component. I'm closing your request and appreciate their efforts to improve this project.

#46

[cjpatoilo]

Hi @alexjj @abouthiroppy

In fact, my intention is to keep Milligram as light as possible, supporting the feature minimum necessary to initialize a project.

You helped me have a great idea! I will create a repository with components produced with Milligram. This should help many people, a place where they can more easily find something that can help it in everyday life.

http://codepen.io/milligram/

[EmilMoe]

Doesn't seem to be well known or used, but I would like a range of navbars too

[Kcchouette]

Same here, navbar and menus are the minimum feature necessary to a project, isn't it?

[gwleuverink]

Heya, I'm looking for a framework that can replace bootstrap for me and milligram is a serious contender.

I could really do with some more examples since I'm not familiar with the framework yet but the codepen link you posed does not work. Do you have another link?

Thanks!

[cjpatoilo]

You are giving me great ideas. 😍

[jrondorf]

Any outcome on the navbar ideas?

[minimallinux]

Milligram is pretty good but I would definitely like to see more Nav options, especially for using with Sage 9 (Wordpress) builds, which usually need a nav walker unless someone can correct me on that?, Thanks

[popey456963]

@cjpatoilo's link seems dead. The new link is https://codepen.io/milligramcss/

(Plus, I would definitely be for adding a navbar to Milligram. I disagree with others saying that it's a narrow thing for people to want, 90% of websites have a navbar.)

[gyasikn]

nav bar would be great

[mhedrick]

I would like to add that the fact that the github.io site has a navbar led me to believe that the package itself had a navbar. it's pretty disingenuous.

[gwleuverink]

I disagree. The pages document doesn’t state a navbar is a core component anywhere. The fact the page has a navbar does not mean it is part of the framework. It isn’t disingenuous, you simply made a wrong assumption.

[mhedrick]

Yes, I thought the package had a navbar until I started reading and found out it didn't. It honestly surprised me - my expectation in looking at ui packages is that they generally only use the tools they provide. I looked through the site css - simply styling the nav tag and adding some styling for nav links doesn't seem like it would add too much overhead?

[chuckreynolds]

^^ all that said... has anybody implemented a fairly simple navbar w/ logo and menu items that responsively breaks down to a hamburger-type menu on mobile as an example?
EDIT: adding here that JS is not preferred... ESPECIALLY jquery. nope. CSS only heavily preferred. allowable cheat would be a small amount of vanilla JS but rather not have any JS at all.

[yebo29]

^^ all that said... has anybody implemented a fairly simple navbar w/ logo and menu items that responsively breaks down to a hamburger-type menu on mobile as an example?

I'm trying my hand on that now using the example included in milligram, using https://github.com/shuedna/Milligram-baseSite-withMenu as reference. I too am very inexperienced with this so may not succeed.

But I agree with above; a responsive nav is pretty foundational.

[chuckreynolds]

updated previous request... CSS only, no JS, especially no jQuery.

[popey456963]

CSS Only Milligram NavBar

Source
Example
MIT License

Depends upon the base library.

[yebo29]

Good work @popey456963. The only thing is that it doesn't break down to a hamburger style menu.
I missed the requirement of no JS/jquery, or vanilla JS. Either way I haven't had much success on my end.. yet.

[yebo29]

I halted my search for a css-only nav that collapses to a hamburger menu for now due to time; I simply replaced the text with font-awesome icons which are more compact and display nicely when scaled down. Also, for the element 'navigation-item' I decreased margin-left to 1.5rem.

Once I complete this project I'll try again... if someone else didn't already complete it.

[yebo29]

Also, hide navbar on scroll up:
For navigation class add: transition: top 0.3s;
Add id="navbar"
JS at bottom:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

No Jquery or other deps required

[popey456963]

I think normally you want to hide the navigation bar on scroll down, not scroll up?

[yebo29]

The code is for scroll down. Sorry, I misspoke

[chuckreynolds]

Following up on css-only responsive nav... this one is simple and works great:
https://codepen.io/chuckreynolds/pen/ROaeXv

[hbast]

Following up on css-only responsive nav... this one is simple and works great:
codepen.io/chuckreynolds/pen/ROaeXv

Thanks for the link. But how do I put that together? The content of my container scrolls 'behind' the header. There should be some kind of padding.

[seia-soto]

Just a comment.

If there are pre-built navbar things, building UI will quite faster.
However, don't you guys think the navbar is something useless? I prefer to providing navbar like Semantic-UI style(using the menu to provide navbar).

I think not too much is good. :)

[cjpatoilo]

Guys, thank you for helping @. For now, I will close this issue.
If someone needs help feel free to reopen or open a new!