Search code examples
javascripthtmlcssback-buttonsinglepage

How to add back button on top navigation bar using css?

Hi all I am trying to add a back arrow button on top navigation bar just like the image: enter image description here

But my current code does not show the the back image at all using css. Could you guys help me make the clickable back button visible ?Thanks in advance.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>

.abcde {
    -webkit-box-direction: normal
}


.abcde,
.Fresh {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.abcde {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 44px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 16px
}


.sky14 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #262626;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

</style>
<style>

.abcde .Fresh Mango {
        background-image: url(./backArrow.png);
    }


</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

function MyNavigation()
{

alert("do something here");

}

</script>
</head>

<body>

<div class="abcde" id="abcde">
    <div class="Fresh Mango"><a href="javascript:MyNavigation();"><span class="cherry" aria-label="Back"></span></a></div>
    <h1 class="sky14">Photo</h1>
    <div class="Fresh Orange"></div>
</div>
</body>
</html>
Solution

  • Could you guys help me make the clickable back button visible ?

    Yep. Here's a very quick made example. Feel free to ask if any questions.

    (Since I could not get the ./backArrow.png from your example, I just used one from the internet).

    .abcde {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sky14 {
  color: #262626;
  display: block;
  flex-grow: 1;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abcde .Fresh.Mango {
  background-image: url(https://image.flaticon.com/icons/svg/8/8764.svg);
  cursor: pointer;
  width: 20px;
  height: 20px;
}
    <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body>
    <script>
      function MyNavigation() {
        alert("do something here");
      }
    </script>
    <div class="abcde" id="abcde">
      <div class="Fresh Mango" onClick="MyNavigation();"></div>
      <h1 class="sky14">Photo</h1>
      <div class="Fresh Orange"></div>
    </div>
  </body>
</html>