Full Width Nav Bar

HTML & CSS
1

Hi, so I am working on a new nav bar and I am having a little trouble with my logo and another image I want them to look like the image: I tried using the float method did not quiet work as far as I know.

2

I just whipped this up real fast - I’m sure others can improve this but it’s certainly a starting point for you.
http://codepen.io/ryanreese09/pen/GJKzGP

3

right the table cell method hehe :grin:

4

So I see my use of margins was incorrect?

5

Yes it was. You were givign a random number (38em off the top of my head) to sorta guess where it should be placed. That would not work in a fluid/responsive environment.

1 Like
6

oh I see

7

I’ve not seen that techniques before. Out of curiosity, is it equally amenable to the creation of a vertically stacked menu for use in a sidebar?

8

howcome there are two widths being used here?, just out of curiosity…

#nav {
  display:table;
  margin:auto;
  max-width:1000px;
  width:100%;
}
9

I took a lot of allergy medication so I’m a bit loopy right now. I’d need a screenshot highlighting what you are attempting to do.

I also did that code sample within a few minutes so it’s not perfect and certainly can be improved.

10

They aren’t two widths. It’s one width.

Display:table shrink wraps by default. So we want it to be close to a display:block; functionality and be fluid. So we give it width:100%. Oops! Now it’s too wide! It’s 100% of the page but we want to restrict it to 1000px max width to line up with the other crap on the page.

Thus max-width:1000px adds on.

1 Like
11

One for tomorrow then - gone midnight here, and I’m not sure I’m up to wrangling the iPad for it whilst lying in bed… :wink:

12

Sure thing - feel free to just make a new thread for it (to not hijack this) and I’ll take a look when I have time.

13

I added a mag. glass by the search bar not sure if my coding is correct. LINK

#search:before {
  position: absolute;
  right: 460px;
  width: 40px;
  height: 36px;
  line-height: 37px;
  background: red;
  text-align: center;
  color: #fff;
  font-family: 'FontAwesome';
  content: '\f002';
}
14

You’re better off just putting it as a background image on the input (#inside_search). You’re aplying it to the parent right now which is the wrong element to put it on.

15

alright

16

Im working on a new concept but I am having trouble aligning the right of the nav bar.
I attached an image of how I want it to look like. PAGE

17

Can you please give us your attempt? Codepen preferred right now since I’m only on a chromebook.

18

Codepen Page

19

Were you just having issue getting the right logo placed?
http://codepen.io/ryanreese09/pen/vOYejr

20

and I wanted to align the nav with the left logo better like here depicted with the blue underline
:

Also I was wondering if I coded the full width of my image correctly it is a 1920x576 image, because I want to make the image full width.