1 reply [Last post]
ahmedsa
ahmedsa's picture
Offline
newbie
Last seen: 2 years 42 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">
        <ul>
            <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>
        </ul>
        <div class="w3ls_header_middle">
            <div class="container">
                <div class="agileits_logo">
                    <img src="../../images/logo.png" class="img-responsive">
                </div>
                <div class="agileits_logo"></div>
                </div>
 
            </div>
 
        </div>
 
            <div class="container body-content">
                @RenderBody()
                <hr />
                <footer>
                    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                </footer>
            </div>
 
 
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/bootstrap")
            @RenderSection("scripts", required: false)
 
 
css
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 */
    height:6%;
 }
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;
 
}
.agileits_logo{
	float:right;
	margin-right:0em;
    height:5%;
 
 
}

the link below show image to actually problem
http://www.mediafire.com/view/sqs1c34wsh6h6xq/no_space_between_logo_and_menu.jpg

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 8 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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.

cheers,

gary

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