How to add on left side of this top nav responsive menu a text logo?

Question

Am trying to modify the w3c top nav responsive menu in order to put on its left side a text logo (ex. Mylogo) but i dont know how my knowledgle is so poor on responsivness, so please can anybody show me how to make it ?

I want text logo (a word) on the left side of the menu and on the right side to be placed the text links of the menu.

Here is the full code :

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

body {
  margin: 0;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.icon {
  display: none;
}
@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

<ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

Answer 1

这只是一个例子。我在我的css（span.logo＆amp; ul.topnav li a：nth（1））中发表评论，我对其进行了更改。当您了解更多信息时，可以使它更美观。我看到你跟着w3school。这是一个很好的学习网站。祝你好运。如果您有任何疑问，请在评论中提问我。 :) [N.B：这只是一个例子，你在网上搜索时会得到更多]

＆＃13;

＆＃13;

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

＆＃13;

span.logo {
  position: absolute;
  /*This set the position absolute for take the My logo text inside the navbar section if you set positon fixed the the text will scroll will your body */
  top: 8px;
  /* Top 8px makes the logo in the middle of the navbar*/
  left: 5px;
  /* left 5px makes the logo get a margin from left border*/
  color: red;
  /* This is the color of text you can set it with your fev color*/
  font-weight: bold;
  /* set the font-weight bold*/
  font-size: 25px;
  /* set the font-size 25px you can change this. but remember if you make it bigger or smaller you need to set the top section so that it will be center with all other li */
z-index:10;   /* Set z-index so that It will display in navbar toggle menu*/
}

ul.topnav li:nth-child(1) {
  margin-left: 100px;
  /*This margin left apply on the li child 1 means the Home text in dextop view*/
}

body {
  margin: 0;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {
  background-color: #555;
}

ul.topnav li.icon {
  display: none;
}

@media screen and (max-width:680px) {
   
  ul.topnav li {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

   }

＆＃13;

   

 <body>
 <span class="logo">My Logo</span>
  <ul class="topnav" id="myTopnav">
   <li><a class="active" href="#home">Home</a>
   </li>
   <li><a href="#news">News</a>
   </li>
   <li><a href="#contact">Contact</a>
   </li>
   <li><a href="#about">About</a>
   </li>
   <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>
</body>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在导航前添加一个元素并将其浮动。

在我的回答中，我将文字徽标和导航包装在<header>元素中，并将背景颜色从<ul>移至<header>。我还复制了文本徽标上导航（即填充）使用的一些样式，用于定位和样式。

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

body {
  margin: 0;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.icon {
  display: none;
}
@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
.primary-nav {
  background-color: #333;
}
.text-logo {
  float: left;
  padding: 14px 16px;
  font-size: 17px;
  color: #fc0;
}

<header class="primary-nav">
  <div class="text-logo">My Logo</div>
  <ul class="topnav" id="myTopnav">
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
    <li class="icon">
      <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
    </li>
  </ul>
</header>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>