CODEWITHSUNDEEP
htmlcss
Zachary
Zachary

Reputation: 147

Navigation fill 100% of container

I'm working with a responsive nav code that I have tweaked for my page. I'm looking to get the code to display the navigation to be full width and match the Call to Action button's width. The problem is the navigation buttons all have different length of texts but I still want it to span the entire div to match the others and give the smooth boxed design. I essentially want it to look like this on a desktop view: this I would also like it to stack like this on a mobile view. (Mobile view shouldn't need any tweaking cause it looks good for me, I just need the desktop to span the entire width of the black div below it.mobile

When I changed the width to the #nav it always knocks a button below.

JSFiddle

#nav, #nav ul {
  display:block;
  list-style: none;
  margin-left:1%;
  padding: 0;
}

Upvotes: 1

Views: 740

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

You can accomplish this by giving your #nav a display: flex; and width: 100%;. Then, assign flex-grow: 1; to your #nav > li along with text-align: center;

CSS

#nav {
    display: flex;
    width: 100%;
}

#nav > li {
    flex-grow: 1;
    text-align: center;
}

JSFiddle

Result

enter image description here

*Note Don't forget to give your #nav a display: block; in the media query so it will stack vertically on smaller screens.

Upvotes: 4

Zay Lau
Zay Lau

Reputation: 1864

It would be less pain to achieve it with CSS media query: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

that display two different element when on desktop view or mobile view. To achieve the items fill 100% width of it's parent, you could use table, tr and td to easily achieve it

Upvotes: 0

Related Questions