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>© @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
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