Making my header / Nav Responsive

Hi I have made a navigation menu in a local version of a site I am building but I am not too sure on how to make this responsive so some guidance would be good not using any helpers like bootstrap just HTML and CSS. attached is an image of my site when shrunk on mobile and you can get my HTML & CSS below.

MY HTML:

<!--Header Section Start-->
    <section>
        <div class="cs-container">
            <header>
                <div class="navLogo">
                    <a href="/">
                        <img src="assets/images/logo/logo.svg" alt="South Ormsby Estate Logo"/>
                    </a>
                </div>
                <div class="navbar">
                    <a href="#" class="">The Estate</a>
                    <a href="#" class="">Products</a>
                    <a href="#" class="">Explore</a>
                    <a href="#" class="">More</a>
                    <button class="">Basket
                        <i class="basket-btn green-outline uppercase"></i>
                    </button>
                </div>
            </header>
        </div>
    </section>
    <!--Header Section End-->

My CSS:

header {
    display: flex;
    justify-content: space-between;
}

.navlogo {
    margin: 15px 0px 15px 0px;
    width: 100px;
}

.navbar {
    margin-top: 30px;

    a {
        font-family: $titles;
        color: $colorPurpleDark;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size:16px;
        text-transform: uppercase;
    }

    button {
        border: 1px solid $colorGreenMint;
        background-color: $colorWhite;
        color: $colorGreenMint;
        padding: 12px 15px;
        font-size: 10px;
        letter-spacing: 2px;
        border-radius:  5px;
        text-transform: uppercase;
        cursor: pointer;
    }

    button::after {
        content: url(../assets/images/icons/icon-basket.svg);
        fill: $colorGreenMint;
        position: relative;
        top: 1px;
        left: 0;
    }
}

any help would be great thanks

I assume you have the meta viewport tag in place otherwise mobiles will not take note of the correct media queries?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Once you have that in place then your next step is to think about how your menu and logo can be presented on smaller screens.

I would suggest that at about 800px max-width you throw in a media query and allow the menu to be full width and centred.

e.g.

@media screen and (max-width:800px){
	header {flex-wrap:wrap;justify-content:center}
	header > * {flex:1 0 100%;display:flex;justify-content:center;}
	
}

Then at around 600px the space gets too tight for one line so I would implement a hamburger icon and hide the menu. There are many ways to do this and many variations but here is one from a Sitepoint article which may be easier for you to follow.

There are many others about with the menu sliding from the top.


https://codepen.io/paulobrien/pen/yNawWR

I couldn’t see your images of course so they may need scaling so it would be better if you signed up for a free codepen account and did your testing on codepen so we can see what’s going on.

As an aside when posting css please use real css and not Sass or Less etc as some of us don’t use them and don’t want to spend time building a demo. Just post the compiled css when you need help with CSS (unless of course the question was pre-processor based). :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.