Logo Image And Menu Interact And No Space Between Logo And Menu

I have image logo and menu interact with each others

so that this is problem because logo not display clearly

i need to display full logo image

in my case not full logo image display

so that i need to display full logo image with another meaning

leave space between menu and logo image

my fiddle as below

fddle problem

i need to modify fiddle to leave space between logo image and menu

my code

<div class="container">
            <li><a href="#home">الرئيسيه</a></li>
            <li><a href="#news">نبذه عن</a><i></i></li>
            <li><a href="#contact">اتصل بنا</a></li>
            <li><a href="#contact2">اللغه</a></li>
            <li><a href="#contact3"> تسجيل دخول</a></li>
        <div class="w3ls_header_middle">
            <div class="container">
                <div class="agileits_logo">
                    <img src="../../images/logo.png" class="img-responsive">
                <div class="agileits_logo"></div>



            <div class="container body-content">
                <hr />
                    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>

            @RenderSection("scripts", required: false)

ul {
    border-top: 2px solid red;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
li {
    float: right;
    width: 110px;
li a {
    display: block;
    color: white;
    padding: 4px;
    text-decoration: none;
li a:after {
  content: " ";
  background-color: #666;
  margin-left: 30px;
  display: inline-block;
  width: 2px;
  height: 20px;
  transform: translateY(20%);
li:first-child a:after {
  background-color: #333;
  margin-left: 0;
.w3ls_header_middle {
    padding: 0 0;


Your menu overrides the normal flow of Html statements, is fixed and will not scroll.

Your logo starts at the top of the page and will scroll.

Applying margin-top: 123px; will force the logo to render below the menu.

Adjust the pixels to suit.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.