Responsive design for twentytwelve

I removed the styling for the navigation beneath the header and it fixed the layout. But I would still like to have this navigation.. Ill put it back now so someone can maybe take a look?

I don’t understand the issue, the Twenty Twelve theme is already responsive.

I know, but apparently something in my coding is messing up the responsive design. If you look at the site on a mobile phone, you can see that the sidebar doesnt go underneath the content but is smushed up next to it, and the toggle button for the menu won’t show (I realize this is because I’ve hidden it because it suddenly popped up on the actual site on a computer as well)

Because you’re floating right the sidebar:

.widget-area {
    float: right;
    width: 23.0417%;
    margin-top: 60px;
}

Great! thank you!! Do you know anything I can about the navigation? ?? The top one isnt so important

I’m not sure what the confusion is, you’re hiding the navigation as well…

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

Thanks for replying so quickly ??

If you look at the site now on a computer, you see that the menu button is showing, which it isnt supposed to. It now works on a mobile, but I want the toggle button only to show on a mobile.
Is this also something in my css?

It’s showing because it has been told to show in your CSS, and in 3 places:
(I’ve commented them with: /******* HERE ******/)

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

/******* HERE ******/
.menu-toggle {
display: inline-block
}

}

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

/******* HERE ******/
.menu-toggle {
display: inline-block
}

}

/* Minimum width of 600 pixels. */
@media screen and (max-width: 600px) {

.main-navigation {
    background-color: #333;
    margin-left: 0px;
    margin-top: 0px;
    max-width: 90%;
    position: relative;
    z-index: 99999999;
    margin-top: 0px;
}
.site-content {
    float: left;
    width: 100%;
    margin-top: 0px;
}
/******* HERE ******/
.menu-toggle {
display: inline-block
}

.widget-area {
    margin-right: 0px;
    margin-top: 30px;
}

}