Remove From My Forums

Add Image Inside Static Menu

Question

User-812117547 posted

I have this syntax to create a pretty standard menu

<html>
   <head>
      <meta content="text/html; charset=ISO-8859-1"
         http-equiv="content-type">
      <title>Test123</title>
      <style>
         body {margin:0;}
         .navbar {
         overflow: hidden;
         background-color: #333;
         ;
         top: 0;
         width: 100%;
         }
         .navbar a {
         float: left;
         display: block;
         color: #f2f2f2;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         font-size: 17px;
         }
         .navbar a:hover {
         background: #ddd;
         color: black;
         }
         .main {
         padding: 16px;
         margin-top: 30px;
         height: 1500px; /* Used in this example to enable scrolling */
         }
      </style>
   </head>
   <body>
      <div class="navbar"> 
         <a href="#home">Home</a> 
         <a href="#menu">Menu</a>
         <a href="#account">Account</a>
         <a href="#cart">Check Out</a> 
         <a href="#contact">Contact Us</a>
      </div>
   </body>
</html>

How could I edit the above html to do something like this image shows?

https://ibb.co/w4fHXMs

Thursday, June 27, 2019 1:15 AM

Answers

User839733648 posted

Hi RahidBalaba,

According to your description, I suggest that you could add a class to the a tag to put the image in it.

And then in the class you could set the style of the image.

Here is a testing demo and you may refer to.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            margin: 0;
        }

        .navbar {
            overflow: hidden;
            background-color: #333;
            ;
            top: 0;
            width: 100%;           
        }

            .navbar a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                .navbar a:hover {
                    background: #ddd;
                    color: black;
                }
                .navbar a.logo {
                    background: url('Image/test9.jpg') no-repeat;
                    height: 70px;
                    width: 130px;
                }
                .navbar a.test {
                    margin-top: 25px;
                }
        .main {
            padding: 16px;
            margin-top: 30px;
            height: 1500px; /* Used in this example to enable scrolling */
        }

    </style>
</head>
<body>
    <div class="navbar">
        <div>
            <a class="test" href="#home">Home</a>
            <a class="test" href="#menu">Menu</a>
            <a class="test" href="#account">Account</a>
            <a class="logo" href="#"></a>
            <a class="test" href="#cart">Check Out</a>
            <a class="test" href="#contact">Contact Us</a>
        </div>
    </div>
</body>
</html>

result:

Best Regards,

Jenifer

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, June 27, 2019 4:19 AM

All replies