Community Forums › Forums › Archived Forums › Design Tips and Tricks › My nav bar sub-items are way off when on mobile device
Tagged: sixteen nine. nav bar
- This topic has 12 replies, 4 voices, and was last updated 10 years, 1 month ago by Marcy.
-
AuthorPosts
-
December 18, 2013 at 7:07 am #79937jamiealexanderMember
I'm not sure if anyone has had this problem in Sixteen Nine, but I would love if you could take a look to see if you can work out what is wrong.
My site is lucidability.com
The nav menu is fine in full-screen mode.
When I minimize browser or look from tablet/phone the sub-items in the nav bar are way off. The boxes appear at the far right and it's impossible to click on them before they disappear.
Cheers
http://lucidability.comDecember 19, 2013 at 12:08 pm #80254MarcyParticipantYou have this line in you style.css
.genesis-nav-menu .sub-menu { border-top: 1px solid #333333; margin: -51px 0 0 240px; }
The 240px is what is doing it.
That line is usually only for .sub-menu .sub-menu, so that the second .sub-menu will appear right next to the first .sub-menu. You need it when your menu is on the side, but try making the the left margin (240px) a smaller number at the screen size when the navigation goes across the top.
Marcy | Amethyst Website Design | Twitter
December 25, 2013 at 7:32 pm #81205Harley130MemberI'm having the same problem on my sixteen nine themed site oldrailroadbridge.org
Marcy, when you state making the 240px a smaller number are you suggesting to make the 240px number smaller in the code snippet above, or placing it in the media group code within the smaller screen size snippets?
December 26, 2013 at 6:09 pm #81311MarcyParticipantI set up Sixteen Nine Pro and tested it, and I can't reproduce what your theme is doing with the menu. Mine works exactly as in in the demo. There is no gap between the parent menu item and the sub-menu drop down.
http://my.studiopress.com/themes/sixteen-nine/#demo-full
http://my.studiopress.com/themes/sixteen-nine/#demo-phoneSome questions:
Perhaps downloading Sixteen Nine Pro it again would help. (You would need to add any customizations again. Make changes a little at a time, and view the page to see if anything affects the menu.)How are you setting up the menu? Do you add the Custom Menu widget to the Header Right widget area under Appearance > Widgets?
In style.css, in the section
@media only screen and (max-width: 1279px) {there should be this section:
.genesis-nav-menu .sub-menu {
margin: 0;
}That will override the margin line in the main section for
.genesis-nav-menu .sub-menu {
border-top: 1px solid #333333;
margin: -51px 0 0 240px;
}But that seems to already be in your style.css; it's just not overriding for some reason.
Marcy | Amethyst Website Design | Twitter
December 27, 2013 at 1:05 am #81364MarcyParticipantYou can try adding !important to:
.genesis-nav-menu .sub-menu { margin: 0; }
in
@media only screen and (max-width: 1279px) {
I don't like suggesting it, but I'm not able to find the line that's overriding it right now.
Be sure to check that the menu still works in the sidebar when you do that.If you're using a Custom CSS editor, maybe the margin: 0 line is overridden there.
Marcy | Amethyst Website Design | Twitter
December 28, 2013 at 6:38 pm #81710Harley130MemberThanks Marcy, I added the !important as you suggested above and it fixed the problem. I've looked through the .css sheets to see if it there is an over ride on the original css and do not see any other reference to the .genesis-nav-menu .sub-menu
I am using the Genesis Extender plugin on this site but I couldn't find anything that was affecting .genesis-nav-menu .sub-menu in it either.
So, for right now I'm going to stick with your suggested fix and keep looking.
Again, thanks for taking your time and looking through the stylesheet and for your suggested fix.
December 28, 2013 at 11:11 pm #81766MarcyParticipantMarch 20, 2014 at 4:27 pm #95892MarkPMemberHi Marcy,
I'm having a similar problem, the mobile hamburger nav doesn't show. I've added your suggestion of important on the mobile css as above, but nothing changes. I totally lose the menu once the browser reaches a small size. If you see this post could you look at katepetley.com and see if you're able to determine why this is not showing the hamburger?
Thanks,
MarkMarch 20, 2014 at 5:29 pm #95894MarkPMemberOK, figured this out. CSS issue with the original #fff color for the black background. Resolved now.
March 20, 2014 at 7:03 pm #95900MarcyParticipantYes, it was the color of the icon. And it's a dashicon, not the HTML character, as in the earlier version that Harley was using.
Marcy | Amethyst Website Design | Twitter
March 20, 2014 at 7:05 pm #95901MarcyParticipantWell, I don't see the icon still, so look for this section:
#responsive-menu-icon:before { color: #FFFFFF; content: ""; font: 24px/1 'dashicons'; margin: 0 auto; }
and change
color: #ffffff;"
to
color: #565657;
Marcy | Amethyst Website Design | Twitter
March 20, 2014 at 10:08 pm #95916MarkPMemberHi Marcy,
Thanks for the reply... Sorry, was working everything out in sandbox first so the code changes weren't live until a few minutes ago. Thanks again for the help! Much appreciated.
MarkMarch 20, 2014 at 11:29 pm #95922MarcyParticipant -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.