Menu icon Foundation
Mobile Menu Issues

Hey, guys.

I was trying to solve my issue without having to post, but even with all my searching and changing code, I'm still having issues.

I'm using a sticky top bar that collapses for mobile and am having the following issues:
1. The menu items do not cover the full width of the screen like they do in the original top bar code. So, the hover background only shows the small area surrounding the text instead of the whole row. The blue area around the yellow hover is only there due to the background being set as the blue -- otherwise, it shows the body background just on the sides when collapsed to mobile.
2. Also, the menu/hamburger icon are to the right side, and I'd like them to be in the middle. I've tried several different options from the forums or StackOverflow, but still can't get it centered -- it's always offset a bit.

I've changed items in SCSS, but have changed them back when they don't affect the menu. Nothing I've added in my custom CSS has had any effect on the menu that I can determine, so I'm at a loss.

So, any clue what variables to be looking for to check on these issues?

Many thanks for any info!
- Scott

Dropdown menu issues

Hey, guys.

I was trying to solve my issue without having to post, but even with all my searching and changing code, I'm still having issues.

I'm using a sticky top bar that collapses for mobile and am having the following issues:
1. The menu items do not cover the full width of the screen like they do in the original top bar code. So, the hover background only shows the small area surrounding the text instead of the whole row. The blue area around the yellow hover is only there due to the background being set as the blue -- otherwise, it shows the body background just on the sides when collapsed to mobile.
2. Also, the menu/hamburger icon are to the right side, and I'd like them to be in the middle. I've tried several different options from the forums or StackOverflow, but still can't get it centered -- it's always offset a bit.

I've changed items in SCSS, but have changed them back when they don't affect the menu. Nothing I've added in my custom CSS has had any effect on the menu that I can determine, so I'm at a loss.

So, any clue what variables to be looking for to check on these issues?

Many thanks for any info!
- Scott

Dropdown menu issues
Mike Puglisi about 4 years ago

If you aren't already familiar with the web / dom inspectors in Chrome / firefox you should check it out.

http://cs.brown.edu/courses/cs132/resources/inspector/

You will then be able to "inspect" the element in question and determine the css selectors that style the element.

For example, you will "inspect" the menu and likely see that the a width of 100% is not specified on the parent element that would allow it to expand to the width of the small display.

You may need to familiarize yourself more with CSS. Also keep in mind that you can just override selectors that originate in the scss without actually modifying those files.

For example, if you see in the inspector that

ul.off-canvas-list a {
padding: 1rem;
}

you can just update the values in the inspector to present it how you like and then apply that to in your css that will override the initial code.

Example:

ul.off-canvas-list a {
padding: .5 1rem;
width:100%;
display: block;
}

Scott Haney about 4 years ago

Hey, Mike.

Thank you for taking the time to write a detailed reply. I really do appreciate the input. I do use the inspectors, but I'll take a look back through and see about the parent width and all. I am definitely not a CSS expert, but slowly chipping away at figuring it all out.

Thanks again. I'll update when I figure out the issue.

Mike Puglisi about 4 years ago

No problem. If your site is live I can take a look for you.

I prefer menus that fly out from the side.

This is a site I just finished.

http://www.truelinesinc.com/

Check out the menu with a small window and you'll see it sweep in from the side.

Feel free to inspect the css :)

Rafi Benkual about 4 years ago

@Scott Haney Surely we can help you with this. It would help to see the code or a link to the site.

  1. Just guessing here but you likely added a width in CSS that should be in a media query so that it only applies to larger screens. Like
@media only screen and (min-width: 40.063em) {
   ...
}
  1. You can target the menu-icon class to move it. It's absolutely positioned so you can use left or right.

http://codepen.io/rafibomb/pen/dowwVW?editors=110

Scott Haney about 4 years ago

Thanks for the reply, Rafi! I'm going to take a look today to see what I can figure out. If I can't get a handle on it, I'll have to put my site online and get some feedback. Thanks again, y'all!