# Responsive Navigation **URL:** \ **Category:** General\ **Created:** [May 6, 2020, 3:24pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679 "2020-05-06T15:24:29Z")\ **Posts on this page:** 20\ **Page:** 1

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 6, 2020, 3:24pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/1 "2020-05-06T15:24:30Z")

Hi I have made this navigation on codepen , but when I am inputing the code into my text editor the responsive navigation does not work as it should, can you identify what’s incorrect. Please view what I’ve done on codepen [https://codepen.io/owainbennett10/pen/wvKparx](https://codepen.io/owainbennett10/pen/wvKparx) This is my code on my text editor ```auto

S D W - Sports Massage Therapist

``` ---

**Author:** ![michaelsndr](https://avatars.discourse-cdn.com/v4/letter/m/ecd19e/32.png) [@michaelsndr](https://forum.freecodecamp.org/u/michaelsndr)\ **Post date:** [May 6, 2020, 4:53pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/2 "2020-05-06T16:53:18Z")

Hi Owain, the `xxx` in the last line breaks your CSS. Also, `.500` in an invalid class name, because CSS classes should start with a letter, “-” or “\_”; Looks like the codepen editor is more gracious … ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 6, 2020, 5:07pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/3 "2020-05-06T17:07:18Z")

Can you help me correct it please? ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 7, 2020, 8:54am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/4 "2020-05-07T08:54:11Z")

Can I please have some help to sort this problem out as it works fine on codepen but not in my text editor. ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 8, 2020, 8:25am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/5 "2020-05-08T08:25:17Z")

Can you please help the navigation works perfectly on codepen but not in my text editor please see code above and details for codepen. ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 9, 2020, 10:42am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/6 "2020-05-09T10:42:51Z")

I’ve started coding a responsive footer but I can see its not looking like I wanted it to look like can I have some help to identify the problem. This is what I want the footer to like please view link, [https://codepen.io/NamiqNamaz/pen/QZYyEq](https://codepen.io/NamiqNamaz/pen/QZYyEq) This is what I’ve done [http://siondafydd-com.stackstaging.com/](http://siondafydd-com.stackstaging.com/). Can you please help me ---

**Author:** ![biscuitmanz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/biscuitmanz/32/188814_2.png) [@biscuitmanz](https://forum.freecodecamp.org/u/biscuitmanz)\ **Post date:** [May 9, 2020, 10:49am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/7 "2020-05-09T10:49:01Z")

hey @OwainBennett, have you copied the code from the codepen? if you did you will need to add bootstrap to your project too as that codepen uses bootstrap 4. ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 9, 2020, 10:50am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/8 "2020-05-09T10:50:09Z")

How can I do that can you help? ---

**Author:** ![biscuitmanz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/biscuitmanz/32/188814_2.png) [@biscuitmanz](https://forum.freecodecamp.org/u/biscuitmanz)\ **Post date:** [May 9, 2020, 10:51am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/9 "2020-05-09T10:51:36Z")

```auto ``` add this into your head tag ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 9, 2020, 10:55am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/10 "2020-05-09T10:55:28Z")

> [@biscuitmanz](#): > Thank you very much can you help me with my navigation problem. ---

**Author:** ![biscuitmanz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/biscuitmanz/32/188814_2.png) [@biscuitmanz](https://forum.freecodecamp.org/u/biscuitmanz)\ **Post date:** [May 9, 2020, 10:56am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/11 "2020-05-09T10:56:47Z")

what problem do you have? ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 9, 2020, 11:29am UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/12 "2020-05-09T11:29:33Z")

My navigation doesn’t collapse on a small screen and how can I make my navigation like this website [http://www.rnaplant.co.uk/](http://www.rnaplant.co.uk/) ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 9, 2020, 1:36pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/13 "2020-05-09T13:36:38Z")

My Navigation does not collapse on a phone as I’ve created it to do, also how can I make my navigation like this website [http://www.rnaplant.co.uk/](http://www.rnaplant.co.uk/). My responsive navigation is from my navigation works perfectly on here. [https://codepen.io/owainbennett10/pen/wvKparx](https://codepen.io/owainbennett10/pen/wvKparx). But when I put it on my text editor it does not work can you please help me [http://siondafydd-com.stackstaging.com/](http://siondafydd-com.stackstaging.com/) ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 8, 2020, 12:32pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/14 "2020-05-08T12:32:27Z")

Hi I have coded a Responsive Navigation on Codepen which works perfectly but when I put the code my my text editor it does not work. I would like to have a similar navigation to this website [http://www.rnaplant.co.uk/](http://www.rnaplant.co.uk/). Can you please help me with my problem Please find the link to my codepen link of where the navigation code is [https://codepen.io/owainbennett10/pen/wvKparx](https://codepen.io/owainbennett10/pen/wvKparx). Then this is my code from the text editor **Code** ```auto

Your company

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio..

``` ---

**Author:** ![Catalactics](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/catalactics/32/151364_2.png) [@Catalactics](https://forum.freecodecamp.org/u/Catalactics)\ **Post date:** [May 8, 2020, 12:38pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/15 "2020-05-08T12:38:21Z")

Well one thing that you can do is make the navbar sticky. So, ```auto nav { position: sticky; top: 0px; } ``` ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 8, 2020, 1:00pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/16 "2020-05-08T13:00:30Z")

Will that make it like the codepen example I’ve done plus how can I make it more similar to RNA Plants navigation?. Can you please help me as I really want it to look like RNA Plants navigation. ---

**Author:** ![Catalactics](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/catalactics/32/151364_2.png) [@Catalactics](https://forum.freecodecamp.org/u/Catalactics)\ **Post date:** [May 8, 2020, 1:12pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/17 "2020-05-08T13:12:36Z")

The position sticky will make it stick to the top of the page like the RNA Plants navigation bar. ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 8, 2020, 1:13pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/18 "2020-05-08T13:13:45Z")

Where can I put in it my code also I want it to collapse as it does on codepen on a mobile as i want it to be responsive?. ---

**Author:** ![Catalactics](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/catalactics/32/151364_2.png) [@Catalactics](https://forum.freecodecamp.org/u/Catalactics)\ **Post date:** [May 8, 2020, 1:22pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/19 "2020-05-08T13:22:07Z")

You can put it on nav CSS ```auto nav { position: sticky; top: 0px; } ``` If you want to make it collapse, you have to create a replacement element which normally is a `i` tag with 3 bars on it. then you can use the `@media` on css. You can learn more about making a responsive tag here: > [How To Create a Responsive Top Navigation Menu](https://www.w3schools.com/howto/howto_js_topnav_responsive.asp) ---

**Author:** ![OwainBennett](https://avatars.discourse-cdn.com/v4/letter/o/a9adbd/32.png) [@OwainBennett](https://forum.freecodecamp.org/u/OwainBennett)\ **Post date:** [May 8, 2020, 1:24pm UTC](https://forum.freecodecamp.org/t/responsive-navigation/384679/20 "2020-05-08T13:24:27Z")

Can you please have a look at the code provided in the earlier messages and let me know where to insert the above, plus I had it collapsing in codpen but not in my text editor can you please look at my codepen which I’ve given the link to I think there must be an error. [Next page](https://forum.freecodecamp.org/t/responsive-navigation/384679.md?page=2)