'Put Logo In the Middle of a Menu with different css style

I have the following code, just a header with a menu, a logo in the middle and social media image on the right, or at least that is my idea.

I want to be able to hover the first four buttons and see the red color, and I got it, however, I wanna be able to click the logo in the middle but not do any hover color effect, as well as the image for social media in the right.

What do I have to do in order to accomplish this? All of the items are listed and considered unordered lists. I figure I need to put the logo and the other image in a different css class. How do I accomplish that? Here's the code:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  border-style: dashed;
  border-color: black;
  border-radius: 20px;
  height: 80px;
  width: 1900px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: none;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: #9E1B2F;
}

.logo {
  display: flex;
  padding: 6px;
  border: 0;
  margin-left: 350px;
  margin-bottom: 0px;
  justify-content: center;
}

.bbicons {
  padding: 6px;
  border: 0;
  margin-left: 1650px;
  margin-bottom: 5px;
  margin-top: -60px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./img/favicon.png">
  <link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Green Day</title>
</head>
<style></style>

<body>

  <div class="navigation active">
    <ul>
      <li><a href="./tours.html">Tours</a></li>
      <li><a href="https://greenday.lnk.to/fatherofall">Listen to Music</a></li>
      <li><a href="./contact.html">Contact</a></li>
      <li><a href="#about">About</a></li>
      <li>
        <a class="logo"><img src="./img/logo.jpg"></a>
      </li>
      <li>
        <a class="bbicons"><img src="./img/bbicons.jpg"></a>
      </li>
    </ul>
  </div>
</body>

</html>

Solution 1:^[1]

Set the logo background color to transparent on hover so it overrides the base styling of the a tags

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  border-style: dashed;
  border-color: black;
  border-radius: 20px;
  height: 80px;
  width: 1900px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: none;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: #9E1B2F;
}

.logo {
  display: flex;
  padding: 6px;
  border: 0;
  margin-left: 350px;
  margin-bottom: 0px;
  justify-content: center;
}

.logo:hover {
  background-color: transparent;
}

.bbicons {
  padding: 6px;
  border: 0;
  margin-left: 1650px;
  margin-bottom: 5px;
  margin-top: -60px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./img/favicon.png">
  <link rel="stylesheet" href="./css/style.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Green Day</title>
</head>

<body>

  <div class="navigation active">
    <ul>
      <li><a href="./tours.html">Tours</a></li>
      <li><a href="https://greenday.lnk.to/fatherofall">Listen to Music</a></li>
      <li><a href="./contact.html">Contact</a></li>
      <li><a href="#about">About</a></li>
      <li>
        <a class="logo"><img src="./img/logo.jpg"></a>
      </li>
      <li>
        <a class="bbicons"><img src="./img/bbicons.jpg"></a>
      </li>
    </ul>
  </div>
</body>

</html>

Solution 2:^[2]

from ast import literal_eval
dash = ['{"Headlines": ["The Sunday Profile: Panth meets Wealth"]}\n', 
'{"Headlines": ["Wage no bar"]}\n']
for i in dash:
    print(literal_eval(i)["Headlines"])

Solution 3:^[3]

I would recommend that in the future you follow StackOverflow's guidance on asking a good question. You should also be sure to provide a minimal, reproducible example.

With that said, assuming the values in the dash list are always json and there is always one headline, you could use a list comprehension to get a new list of all headlines.

import json

dash = ['{"Headlines": ["The Sunday Profile: Panth meets Wealth"]}\n', '{"Headlines": ["Wage no bar"]}\n']

headlines = [json.loads(x)["Headlines"][0] for x in dash]

The new variable headlines would have all of the items you are looking for. If Headlines from the dash list can have more than one value, I'd recommend just leaving them as lists and dropping the [0] index from the stated solution.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	AStombaugh
Solution 2	AsukaMinato
Solution 3	Justin

'Put Logo In the Middle of a Menu with different css style

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]