User Interface in a Navbar - html

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>logout</p>
<div class="topnav">
<a class="active" href="/WWW/home.php">Home</a>
Shortcode
Work Order
</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">
Home
About us
Contact
</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">
Home
Shortcode
Work Order
Logout
<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>