What is wrong with my HTML/CSS code?

[aznsmile]

This is my assignment:

*a header that will be fixed at the top even if the content is too big
*the menu (we will assume that it will have 4 items the most) - should be horizontal in desktop and vertical when in mobile devices

I don;t know why the toggle button won’t work. What did I do wrong? How do I fix this?
also why is the toggle button on top??? this is giving me headaches
Thanks!

Edit fiddle - JSFiddle - Code Playground

[PaulOB]

@aznsmile

I don;t know why the toggle button won’t work. What did I do wrong? How do I fix this?

I assume you have linked to all the bootstrap js files etc?

Then you need to add the data-target and data-toggle into the button.

<!-- Brand and toggle get grouped for better mobile display -->
<button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="menu-toggle collapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

Then you would use your media queries to hide and show the button when required.

(I’m in a rush so can’t offer more help today.)

[aznsmile]

I am having trouble with my css framework. The toggle button doesn’t work and it doesn’t cascade neither and I still need to stack the menu links above each other. the toggle button should appear when its on mobile version but its appearing on desktop version… I think I can only use CSS?

http://hills.ccsf.edu/~schow11/Test/hw2.html

You will build here a framework defining only CSS rules in a CSS file so I can use to web pages that I build but a CSS file with rules that would have at least the rules mentioned below.

Here are the basics rules you need to have in your framework (CSS file):

a header that will be fixed at the top even if the content is too big the menu (we will assume that it will have 4 items the most) - should be horizontal in desktop and vertical when in mobile devices for any links (in the content area, not in the navigation), you should use the images inside homework2 folder and when it’s a link to a pdf file, you will present a pdf logo right after the link, when it’s a link to an html or htm page, you will present the browser logo, when it’s a link to anything else, you will present the interrogation mark (see the image below here to see the HTML code and how it would show on the browser)

[PaulOB]

@aznsmile

The toggle button doesn’t wor

It won’t work without JS which is why I said you were missing the bootstrap files. From your comments it seems you weren’t asked to add a toggle button anyway.

@aznsmile

a header that will be fixed at the top

I assume you need position:fixed with top left and right co-ordinates set.

@aznsmile

a header that will be fixed at the top even if the content is too big

That makes no sense. If the content is too big for what?

Seems to me your task is to make a fixed header that has a horizontal menu for desktop and a vertical for small screens. You don;t need a toggle button to do this just use media queries and re-style as required.

@aznsmile

but a CSS file with rules that would have at least the rules mentioned below.

What rules were you given?

The ones in your fiddle seem to be based on bootstrap as does your html. Where did you get the html from? You are using classes that rely on the bootstrap js to hide and show things. Also note that you have something weird here:

<div class="#collapse nav

That hash (#) shouldn’t be there.

As this is an assignment you really need to work through this yourself to some degree. I can’t believe you have been set something that you haven’t learned yet or covered in some way.