menu toggle link is misaligned, not entirely clickable

  • Hi there, I’ve been tackling this for a long time now and I think I just give up. I have tinkered with your CSS and nothing seems to work.

    The toggle text area is getting ‘cut off’ by the header area. If I move it up, it becomes unclickable. If I add :before text, that seems to affect it too. If I adjust it’s float and position, it gets misaligned with the call now.

    See screenshot: https://cloudup.com/cwNibX5EyUv – it’s just not aligning properly with these two elements. But either way, nav menu isn’t fully accessible.

    Either it will be cut off and not show all of it, or it will not be clickable.

    I think it’s because you’re using a lot of absolute or relative positioning on this, instead of just letting it ‘float’ where it wants to go, with regular padding or alignment. It has a float left on it, but it shows on the right, with “right” positioning. It doesn’t make sense to me. But maybe you had a reason for doing it this way.

    Will you fix this soon?

    Suggested changes to CSS that I could make so far (but I’ve spent too long trying other things that didn’t work):

    .amp-wp-header .nav_container {
      right:inherit;
      position:relative;
  }

    and

    .amp-wp-header .ampforwp-logo-area {
padding: 1em 16px;   
       
   }

    Right now you have:

    padding: .875em 16px; –> this is too short in height

    Also, users usually need to know the ‘hamburger icon’ is a menu before they realize that’s what it is. So I suggest:

    .toggle-text:before {
       content: "MENU";
       position: absolute;
    right: 42px;

    Anyway, even if you don’t use the suggestions above, I just want it to be usable – visible and clickable. Does anyone have a fix for this?

    Thanks.

Viewing 1 replies (of 1 total)
  • Thread Starter joycegrace

    (@joycegrace)

    Ok I may have spoken too soon, but there is definitely a problem with the CSS and getting the menu and phone links to work.

    I figured out custom css here, which removes the ‘phone’ shape and replaces it with a phone number (my preference). But others can leave the ‘shape’ in I guess.

    This seems to fix both elements so they are both clickable and both show. Not perfect when aligning responsively, but too many media queries to fix probably beats the point of AMP anyway. I’d love if plugin creators had a better solution.

    .amp-wp-header .nav_container {
      right:inherit;
      position:relative;
      top:0px;
  }
 
   .toggle-text:before {
       content: "MENU";
       position: absolute;
    right: 42px;
    	font-family: 'Droid Sans', sans-serif; */ --> My theme fonts but others can customize here /*
   }
   
   .amp-wp-header .ampforwp-logo-area {
padding: 1.5em 16px;   
   }
   
   .callnow {
    position: relative;
    top: 0px;
    	font-family: 'Droid Sans', sans-serif; */ --> My theme fonts but others can customize here /*
   }
   
    .callnow a:before {
        content: "123-456-789"; 
            position: relative;
    left: 88px; */ --> would much prefer this be controlled by margins and divs - this gets it to align with the text on the AMP page /*
    right: 0px; 
    width: 0px; 
    height: 0px; 
    border-width: 6px 0 6px 3px;
    border-style: none; 
    border-color: inherit;
    background: transparent;
    transform: none;
    box-sizing: inherit; 
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    	font-family: 'Droid Sans', sans-serif;
    }

    I added “Menu” to before the hamburger menu toggle, but I realize that may be added CSS which may surpass AMP limits. I still think it’s necessary to get in there somehow. Others can pick. An HTML way to do this in your plugin settings would be great.

    • This reply was modified 7 years, 9 months ago by joycegrace.
    • This reply was modified 7 years, 9 months ago by joycegrace.
Viewing 1 replies (of 1 total)
  • The topic ‘menu toggle link is misaligned, not entirely clickable’ is closed to new replies.