Grow your CSS skills. Land your dream job.

Navigation help appreciated

  • # February 6, 2013 at 10:13 am

    I’m amidst getting to grips with learning CSS and Html and i’m struggling with my navigation. As a way of trying to get to grips with building i’m looking at websites and then trying to recreate them as best I can.

    The link below will show you the website I am trying to recreate. I have the header and the logo but I am really struggling with the nav.

    1) I can’t do the simplest of things and get the menu within the header on the right hand side.

    2) I can’t figure how to get the slightly different colour background to each menu item when its clicked on!

    http://kilianmuster.com/ I feel sorry you have to deal with beginners like me!

    # February 6, 2013 at 10:22 am

    @Stressednewbie, would you mind copying and pasting what you DO have so far into a [pen](http://codepen.io “”)? It’s tough helping without seeing what you’re dealing with specifically.

    Or, if you have a live version of your project, if you could provide a link?

    # February 6, 2013 at 10:32 am

    In basic terms, you will have a header element (div or header).

    Inside that you will have a menu (ul or nav) and that will be floated to the right.

    As for the background color of the list item changing once clicked there are a couple of ways to do that.

    One is will JS to apply an ‘active’ class to that list item.

    The other is to apply a class to the body of each page and then use a css to define the properties based on that class.

    # February 6, 2013 at 10:41 am

    http://codepen.io/Stressednewbie/pen/JsevD

    I’ve just put it on pen. I cant see why the logo hasn’t came up on the header and also unsure now as to why the menu doesn’t stretch across. Also my background is not showing up now ha, jesus its going to take me a while.

    # February 6, 2013 at 10:54 am

    @Stressednewbie, your logo and background aren’t showing up because they are relative paths..I looked at that site and came up with a quick pen:

    http://codepen.io/ChrisPlz/pen/ucnLa

    Basically, to get that look, you have to have an inner div, specifying a max width, then float the navigation to the right.

    # February 6, 2013 at 10:55 am

    The logo image will not show up unless it is on a web server.

    If you know the dimensions, you can substitute in either an image from lorempixel.com or placehold.it

    Also, list items (li) should be inside a list (ul) and this does not seem to be the case with your pen code. I would think that this might be the source of your problems.

    # February 6, 2013 at 11:05 am

    Thanks for the help, appreciated. Never heard of CodePen before, very useful.

    # February 7, 2013 at 1:20 am

    Also check out [hhhhold.com](http://hhhhold.com “hhhhold.com”) for placeholder images. It can give you a better idea of the end product, since the images are random.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".