User Interface in a Navbar

Question

I am a beginner in HTML/CSS, So I am facing a problem while trying to integrate the user interface on the Navbar like this: . I don't know how to style it, which tags should I use and how to put icon of user...

 /* Add a background color to the top navigation */ .topnav { background-color: #e61a26; overflow: hidden; position: relative; top: 0; width: 100%; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Add a color to the active/current link */ .topnav a.active { background-color: #f1f3f2; color: #000; } /* Add a gray right border to all a items, except the last item (last-child) */ a { border-right: 1px solid #fff; } a:last-child { border-right: none; }

 <p>Welcome <strong>Username></strong></p> <p><a href="logout.php" style="color: red;">logout</a></p> <div class="topnav"> <a class="active" href="/WWW/home.php">Home</a> <a href="/WWW/shortcode.php">Shortcode</a> <a href="/WWW/workorder.php">Work Order</a> </div>

Answer 1

I tried to solve this with flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There are also some special cases like the border on the last, which is invisible. For this use the :last-child selector to remove it from the last item. And to style the link to look like a normal text, use text-decoration: none; For the user image you can use the img tag. After you set your custom width and height use and border-radius: 50%; to make it automaticlly a circle.

Just study the flexbox guide and you'll see it isn't that hard. Hope this helps.

 body { margin: 0; } .navbar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: red; } .navbar__left, .navbar__right { display: flex; flex-direction: row; align-items: center; } .navbar__item { padding: 20px; color: white; border-right: 1px solid white; text-decoration: none; } .navbar__item:last-child { border-right: none; } .navbar__item--active { background-color: white; color: black; } .navbar__user-image { width: 45px; height: 45px; border-radius: 50%; } .navbar__user-image, .navbar__user-logout { margin-right: 15px; }

 <nav class="navbar"> <div class="navbar__left"> <a href="#" class="navbar__item navbar__item--active">Home</a> <a href="#" class="navbar__item">About us</a> <a href="#" class="navbar__item">Contact</a> </div> <div class="navbar__right"> <img class="navbar__user-image" src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" alt="user img"> <span class="navbar__user-logout">user logout</span> </div> </nav>

Answer 2

So after a few tries I succeeded it's really simple here is my code now :

 /* Add a background color to the top navigation */ .topnav { background-color: #e61a26; overflow: hidden; position: relative; top: 0; width: 100%; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Add a color to the active/current link */ .topnav a.active { background-color: #f1f3f2; color: #000; } /* Add a gray right border to all a items, except the last item (last-child) */ a { border-right: 1px solid #fff; } .workorder_link { border-right: none; } a:last-child { border-right: none; }

 <nav class="navbar"> <div class="topnav"> <a href="/WWW/home.php">Home</a> <a href="/WWW/shortcode.php">Shortcode</a> <a href="/WWW/workorder.php" class="workorder_link">Work Order</a> <a href="/WWW/logout.php" style="float: right;"> Logout</a> <a style="float: right; text-decoration: none;">Welcome <strong>Username</strong><img src="img/user.png" style="margin-bottom: 5px; margin-left: 5px; width: 20px; height: 20px;"></a> </div> </nav>