- This topic is empty.
February 6, 2013 at 10:13 am #42526
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:32 am #123571Paulie_DMember
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 #123575
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:55 am #123577Paulie_DMember
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 #123578
Thanks for the help, appreciated. Never heard of CodePen before, very useful.February 7, 2013 at 1:20 am #123620
- The forum ‘CSS’ is closed to new topics and replies.