A few CSS questions

[Mastah]

1. Header navigation.

What I would like s when you're having the header along with the logo that the navigator is on the right side and that it aligns with the logo so that it looks good. I've been trying to do that for a long time now but I can't get it out probably because I'm not that much of a CSS professional and that I'm still trying to learn.

You are allowed to make any change if you think that something needs to be improved in the code, also that you're allowed to make changes and everything you could probably do to make it look better would be very much appreciated.

#header {
    background-color: #90C3D4;
    border-bottom: 1px solid #6F9CAB;
    width: 100%;
    height: 40px;

#logo {
  padding: 11px;
  color: #fff;
  text-shadow: 1px 1px #527885;
}
}

Making the header along with the logo & navigation responsive.
You may just tell me: Can't you do that on your own? No, I've been looking on the internet for tips and what not and I was unfortunately unable to find a great tutorial how to do this, I kept getting stuck and somehow unable to make my header responsive, again this could be done once one of you have made the navigator in the header and I'm able to throw the code in to my website.


Here's the header and logo code for you who want to make a beginning:

#header {
    background-color: #90C3D4;
    border-bottom: 1px solid #6F9CAB;
    width: 100%;
    height: 40px;
}


#logo {
    padding: 11px;
    color: #fff;
    text-shadow: 1px 1px #527885;
}

Would be nice if any of you is able to fix this, thank you in advance!

 

[Swaggots]

#nav {
    float: right;
}

#logo {
    float: left;
}

Should do the trick

 

[Mastah]

@Swaggots

This doesn't help at all, I want to see that the logo is at the same height as the navigator text, not that the navigator text is higher than the logo text, there is a special way to get that done and I'm going to need that method and your help does help but it doesn't help in a way that it's going to be better, also I need to know where in the HTML where to make the navigator so that it comes in the header on the right side. Please come with more information.

 

[brsy]

Add vertical-align: middle; to your logo styling.

 

[Mastah]

Thank you @brsy, I'm going to try that right now on the sake of hope.
 
That didn't really do much...
 
Sure, I'm doing it on Cloud 9 if you make a account then I could add you in to it so you can edit it.

 

[Weasel]

Assuming your nav and logo are in the same container (which is best practice) you could do this (this is an example of how you could do it, I've taken out all the styling stuff to make it simple for you):

<div class="menu">
<div>
<a href="index.php" class="logo"><img src="assets/images/logo-syntax.png" alt="Logo"></a>
</div>
<div class="menu-items">
<a href="index.php">Home</a>
<a href="login.php">Login</a>
</div>
</div>

.menu {
box-sizing: border-box;
width: 100%;
height: 75px;
}

.menu a {
text-decoration: none;
padding-top: 30px;
padding-bottom: 30px;
padding-right: 15px;
padding-left: 15px;
float: left;
}
.logo {
padding-top: 14px !important;
}

 

[Mastah]

Thanks Wess, you´re a Dutch hero


But what like if you want a normal logo instead of a image and you want it to align with the nav :')

Nevermind had that fixed by doing this:

.logo {
padding: top: 30px;
padding: bottom 30px;
padding: left; 15px;
float: left;
}

 

[Weasel]

Awesome! If you need any further assitance, let me know.

 

[Mastah]

Yes, the last thing is that I need it responsive, and I'm bad with doing that any tips or any code you can share to get it that way.

 

[Weasel]

What exactly do you want to be responsive what currently is not responsive?

 

[Mastah]

Like you can make all your classes responsive with the mobile by adding this MEDIA thing but I've tried and suck at it so i'd like to know if you're able to do that so that I can visit it via my mobile without having fucked up headers etc.

 

[Weasel]

Well, I'm not quite a hero in using the media functions too from scratch, but if you show me what you have and what's not working, I'll be able to help. Basicly you just overwrite current classess like this:

@media screen and (max-width: 699px) {
.menu {
background-color: #181818;
width: 100%;
height: auto;
min-height: 75px;
text-align: center;
padding: 5px;
}
}