# Navbar & toggle ICON position problem

**URL:** <https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239>\
**Category:** General\
**Created:** [April 17, 2018, 10:17pm UTC](https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239 "2018-04-17T22:17:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hrmdrum](https://avatars.discourse-cdn.com/v4/letter/h/c57346/32.png) [@hrmdrum](https://forum.freecodecamp.org/u/hrmdrum)\
**Post date:** [April 17, 2018, 10:17pm UTC](https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239/1 "2018-04-17T22:17:53Z")

</div>

Hey,

I have 2 problems with my navbar actually:

1. I can’t figure out how to make that my ICON is on the left, but the other 3 buttons are on the right side.
2. ON SMALLER SCREEN:  
-I’ve done that my toggle icon is already on the right side.  
-the problem is that after I click the toggle icon, my navigation list is on the left side and my icon goes there too…

My link:

> **[jxNvvP](https://codepen.io/hrmdrum/pen/jxNvvP)**
>
> ...

Thanks!

---

<div class="post-metadata">

**Author:** ![Annestezia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/annestezia/32/74275_2.png) [@Annestezia](https://forum.freecodecamp.org/u/Annestezia)\
**Post date:** [April 18, 2018, 8:14am UTC](https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239/2 "2018-04-18T08:14:01Z")

</div>

- place ur toggler button after .navbar-header in html
- add . ml-auto to `<ul class="navbar-nav ">` to move menu items to the right

extra

- remove opening body tag
- move font awesome link to settings css or html (just for readability)

---

<div class="post-metadata">

**Author:** ![hrmdrum](https://avatars.discourse-cdn.com/v4/letter/h/c57346/32.png) [@hrmdrum](https://forum.freecodecamp.org/u/hrmdrum)\
**Post date:** [April 18, 2018, 8:30am UTC](https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239/3 "2018-04-18T08:30:28Z")

</div>

Thanks. It works. I mean, I have my 3 nav buttons on the right, and toggle icon on the right too (when screen is smaller).

But the problem is still that on smaller screen, when I click the toggle icon, my navigation menu is on the left (opposite side from the toggle icon). Could you give me any tip with it?

Thanks!

---

<div class="post-metadata">

**Author:** ![Annestezia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/annestezia/32/74275_2.png) [@Annestezia](https://forum.freecodecamp.org/u/Annestezia)\
**Post date:** [April 18, 2018, 8:41am UTC](https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239/4 "2018-04-18T08:41:27Z")

</div>

smth like this?  
.navbar-item{  
text-align:right;  
}

---

<div class="post-metadata">

**Author:** ![hrmdrum](https://avatars.discourse-cdn.com/v4/letter/h/c57346/32.png) [@hrmdrum](https://forum.freecodecamp.org/u/hrmdrum)\
**Post date:** [April 18, 2018, 8:45am UTC](https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239/5 "2018-04-18T08:45:03Z")

</div>

You’re great! Thank you so much for your tips! 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:58pm UTC](https://forum.freecodecamp.org/t/navbar-toggle-icon-position-problem/186239/6 "2021-01-16T17:58:36Z")

</div>

Closed on January 16, 2021, 5:58pm UTC