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.

    I´ve 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 don´t 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 wasn´t 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
    •