Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centered image prevents home, about buttons to work

    hi.

    Ive tried to center an image (that should only appear in the center of the nav bar when someone has scrolled down. )on a sticky nav bar but I have encountered an issue that I cannot solve.

    The problem is that the image prevents the buttons on the navbar from working.

    .html
    Code:
    	<div class="nav">
    		
    		    <ul>		
               		<li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>  	
                </ul>
                <div class="head-menu">
    		 			<img src="img/logo.png" width="250" height="50">
    				</div>
    	 
    	</div>
    .css
    Code:
    head-menu{
    	
    	top:1px;
    	margin:auto; 
    	position:absolute;
     	left:0;right:0; 
    	text-align:center;
    
    	
    }

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    It might be a z-index issue, but it's hard to tell without seeing the entire picture. Can you try duplicating the problem here?

    http://jsfiddle.net/
    My signature :)

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought the same, but m not using any z-value.

    I know that the issue is caused by left:0;right:0; I dont know why

    yes, the problem appears on jsFiddle also

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I noticed one other thing just a minute ago.

    I put in a background color on the image that is overlacking the buttons and I saw that it streched over the navbar insted of just around the image.

    what I mean is that the background color wasnt just behind the image but also across the navbar.

    hope it makes any sense what Im talking about...

    how do I fix it?

  • #5
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Update...

    it was caused by left:0;right:0;

    is there another way to center the image?

  • #6
    New Coder
    Join Date
    Aug 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I fixed it...

    I just added: width: 20%;

    and the background shrunk to the proper size

  • #7
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Great job on fixing the problem.

    By duplicating it on jsfiddle though, I meant posting the code there and sharing a link so we can help. Either way though, glad you got it fixed.
    My signature :)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •