Portion of Navigation Bar Doesn't Allow Me to Click

  • Hello,

    I recently added a custom css (listed below) to center my navigation bar, but after that change the right end portion of my navigation bar won’t let me click on the menu items (specifically, menu items “article and webinars” and “contact us”). Does anyone know how I can resolve this issue. Your help would be much appreciated. 

    nav#site-navigation {
position: absolute;
top: 25px;
left: 15%;
right: 0%;
margin-left:auto;
margin-right:auto;
}

    ** I am a total newbie, so step by step guidance is much appreciated. Thank you!

    -Lara

Viewing 5 replies - 1 through 5 (of 5 total)

  • Can you post a link to your site?

    Thread Starter crenetex

    (@crenetex)

    https://crenetex.com/

    An easy fix would be to use z-index to put the header menu above the header:

    nav#site-navigation {
position: absolute;
top: 25px;
left: 15%;
right: 0%;
margin-left:auto;
margin-right:auto;
z-index: 10;
}
    Thread Starter crenetex

    (@crenetex)

    Thank you so much Stephen!

    Just out of curiosity (and knowledge for the future), what is the ‘z-index,’ and what does it do?

    Again, thank you so much!

    Z-index determines how elements stack when they overlap. Normally, the browser draws the page such that elements don’t overlap, but using position: absolute like you’ve done essentially tells the browser “Put that element exactly in that position, even if it overlaps something else.” In those cases, z-index is used to determine which element shows up “on top”. This is commonly used to put text over an image or to put a semi-transparent overlay over an image to create some sort of special effect.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Portion of Navigation Bar Doesn't Allow Me to Click’ is closed to new replies.