Responsive design with Wordpress: Setting up main navigation

Question

You can view my site live here.

I'm fairly new at designing responsive websites and I'm trying to develop my coding skills. I am trying to make sure that my main navigation and site title look consistent across all screen sizes. However I'm having issues with setting up the CSS properly. I'm usually quick with finding a solution, but for some reason I can't get the result I want to achieve.

The plan is to align the site's title and the navigation below each other and although there numerous ways of doing that, I can't seem to figure out the best practice.

It currently looks messed up and the navigation is being cut off at certain edges. I've tried adding more and removing padding to/from the responsive stylesheet rules.

Current Screenshot

My current navigation looks like this:

CURRENT MARKUP

/*** CURRENT CSS ***/
.title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    padding:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#00e9d9;
    margin-right:232px;
}
#navigation {
    background-color:#18161d;
    padding-top:4px;
    padding-bottom:4px;
    font-size: 13px;
    letter-spacing:2px;
    text-align:center;
    font-family: 'Open Sans', sans-serif;
    font-weight:700;
    font-size:13px;
    z-index:1;
    overflow:hidden; 
    color:#00e9d9;
    margin-bottom:25px;
}

<!-- CURRENT HTML -->

<div id="navigation">
    <span class="title">KATERINA GRAHAM WORLD</span>
    <a href="#"><i class="fa fa-home"></i> Homepage</a> 
    <a href="#"><i class="fa fa-info-circle"></i> Information</a> 
    <a href="#"><i class="fa fa-camera"></i> Photo Archive</a> 
    <a href="#"><i class="fa fa-desktop"></i> Website</a> 
    <a href="#"><i class="fa fa-align-left"></i> Online</a> 
</div>

I'm having a hard time understanding your desired layout. You want your title on a single line and then the navigation directly under that? Is it as simple as adding `display:block;` to your `.title` class? — jbrya029, May 06 '16 at 14:37
Hmm, I guess I should've been more specific about the screenshots, I'm sorry about that. They aren't similar 'cause they're not the same size. One is for a bigger screen than the other. The smallest one is the one I'm actually worried or moreso annoyed about, but yes, you're correct. I want it the way you said, so I'll be checking my coding again and see if it has that. — Manuela, May 06 '16 at 18:41

score 1 · Answer 1 · edited May 07 '16 at 14:48

Solved the issue. I didn't think it'd be necessary to create a styling for mobile screen sizes because I thought adding a max-device-width would tell the browser what I wanted 'cause I gave it a max. I should've been way more specific about it and making sure the code DOES have styling for smaller screen sizes zo I added this:

/*------------------------------------------
     450px Media
------------------------------------------*/
@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {

_#header {
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}

.title {
padding:10px !important;
width:100% !important;
display:block;
}

#navigation a:link {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:active {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:visited {
display: block;
margin: 3px;
padding: 10px !important;
}

#navigation a:hover {
display: block;
margin: 3px;
padding: 10px !important;
}
}

I removed the Code Snippet feature from this answer because CSS can't be demonstrated live without the HTML. — Sparky, May 07 '16 at 14:49

score 0 · Answer 2 · answered May 06 '16 at 14:35

0

Instead of entirely customising your container, customise the links as well.

E.g.

a {
padding:7px;
margin:0 8px;
color:#00e9d9;
background:#00e9d9
}

answered May 06 '16 at 14:35

Gavin Thomas

1,196
6
10

I'm not sure what you mean, exactly. My links, including the ones that are meant to be for the navigation menu, are costumized. In responsive.css my links are also a tiny bit costumized. They have a padding of 10px on all sides. – Manuela May 06 '16 at 18:46

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

I think that you should refer to this answer on this previous question Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

I really do recommend that you read a little about Design Fundamentals and also read about responsive web design. Here is a few articles to get you started: HTML Responsive Web (W3) and Responsive Web Design: What Is It and How To Use it (Smashing Magazine)

Designing a good, user-friendly responsive website takes time and planning. Personally I like to design each element at a time (e.g I'll design the generic desktop header element then redesign or tweak it for tablet and mobile. Then I'd do the same for the footer and site content.)

edited May 23 '17 at 10:29

Community

1
1

answered May 06 '16 at 14:59

RB Web

52
10

I will definitely do that, but for now I'm just looking for ways to get this one done the way I want to. As I've mentioned above, I don't consider myself a beginner but I wouldn't say I'm an expert given the fact that I'm teaching myself by messing around in my spare time. I'm aware of it taking time and planning but I get easily overwhelmed, as stupid as that may sound. – Manuela May 06 '16 at 18:44

Responsive design with Wordpress: Setting up main navigation

3 Answers3