1 reply [Last post]
ahmedsa's picture
Last seen: 5 years 32 weeks ago
Timezone: GMT+2
Joined: 2017-02-11
Posts: 3
Points: 6

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;

the link below show image to actually problem

gary.turner's picture
Last seen: 1 year 30 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested

The menu is {position: fixed;}, which means it is not in the flow and is not 'seen' by other elements. Try giving the logo's containing element a top margin sufficient to clear the menu.

You may have other issues due to floating the logo, as floats are selectively not in the flow. But let's fix one thing at a time.

It makes it easier on us if you post a link to the problem page. We can easily manipulate the code, where otherwise we have to set up a page on our own servers. Pics are nice for visualization but cannot be debugged.

Have a care; it is nearly always a poor practice to declare a height for major layout elements.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.