Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mobile Responsive issues with Glam Pro
Tagged: Glam pro, Mobile responsive issues
- This topic has 8 replies, 3 voices, and was last updated 6 years, 8 months ago by
candacegodwin.
-
AuthorPosts
-
November 8, 2016 at 12:31 pm #195912
candacegodwin
ParticipantHas anyone else noticed/experienced problem with the Glam Pro theme in mobile responsive mode? I am using this theme and the header/logo is not aligning correctly in mobile (it's off the the right) and the biggest issue is that all the sub navigation arrows are all jumbled to the right as well.
In looking at the live site demo on my mobile device, I see the down arrows on the demo sub nav is similar -- although not as bad as it is on my site. Has anyone else experienced this? Anyone have a fix for this? I really like this theme, but this is a deal breaker if it doesn't render correctly on mobile. Any suggestions/code fixes etc, would be greatly appreciated.
site: http://bodybybethstudio.com
Thanks, Candace
http://bodybybethstudio.comNovember 8, 2016 at 12:55 pm #195913William
MemberYep you can fix those issues 🙂
#1 - The logo is too big for mobile devices:
.header-image .site-title, .header-image .title-area { background: none; border: none; outline: none; padding: 0; margin: 0 auto; width: 450px; }
Change the width accordingly
#2 - Remove the margin
menu.responsive-menu .menu-item-has-children > a { margin-right: 60px; }
Hope it helps 🙂
Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !
November 8, 2016 at 1:27 pm #195915candacegodwin
ParticipantHi William,
Thank you so much for your help! I changed the width to 320 and it is perfect -- thanks for that tip. 🙂
I'm still struggling with the second issue: I changed "margin-right: 60" to "0" -- it's better than it was, but the arrows are still not aligned. Here is the entire section of code -- you can see what I changed. Are there other changes to this section that should be made to get the arrows to align?
.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 0px;
}.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
}.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
}November 9, 2016 at 12:42 am #195924William
MemberHi there,
Indeed those arrows are not moving to the right 🙁 ! If I can spare the time I will look into it this evening 🙂
Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !
November 9, 2016 at 10:24 am #195949candacegodwin
ParticipantHi William,
I really appreciate the effort you are giving this. I did notice that when I made your suggested change to right-margin: 0, that none of the arrows were responsive...however, when I changed the code back to "right-margin: 60px" the two arrows furthest to the right (personal training and news & articles) function to reveal the sub-nav. The other two, fitness classes and about, are not aligned and are not responsive.
Interestingly, this is a similar case on the Glam theme live demo -- the "layout" sub nav in the menu is not aligned far right and is not responsive -- the other two, Samples and Layouts do work. It has to be something wonky with the theme's nav menu -- I've reached out to the developer, but haven't heard anything back. Any insight or things to try would be appreciated -- surely I can't be the only person using this theme and having this issue...
If we get this figured out, I'll owe you more than a cup of coffee!
Thanks again for your time thus far,
Candace
November 9, 2016 at 10:45 am #195950William
MemberDear Candace,
Finally after playing around with the CSS, I found the solution 🙂
It's pretty simple !
.genesis-nav-menu.responsive-menu .menu-item-has-children { cursor: pointer; position: relative; } .genesis-nav-menu.responsive-menu .menu-item-has-children > a { margin-right: 0; } .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { content: "\f347"; float: right; font: normal 16px/1 'dashicons'; height: 16px; padding: 16px 20px; right: 0; text-align: right; z-index: 9999; position: absolute; }
Add the CSS attribute of
position: relative;
to the parent elementAdd the CSS attribute of
position: absolute;
to the arrowsOf course set the margin to 0
Let me know if that works 🙂
Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !
November 9, 2016 at 12:36 pm #195957candacegodwin
ParticipantWilliam,
Thanks for sending this code -- however, the develop contacted me earlier this morning, accessed my site and "fixed" the issue. I replied and asked what she changed, but she's gone silent. If she does reply, I'll will let you know what she did. I really appreciated your help in trying to figure the problem out and sending me a solution. I'm very thankful for people like yourself, who take the time to help others.
Candace
January 22, 2017 at 11:44 pm #199828stampintink
MemberHi Candace! Did you ever hear back from the developer on this? I know it's over 2 months old, but I'm struggling with the same header issue. I had assumed that the newer Pro versions would automatically change the logo sizes to be mobile responsive. I am not sure how to do this myself.
January 26, 2017 at 2:25 pm #200087candacegodwin
ParticipantHi, I contacted the developer through their support link from the demo site. If you have the demo-site open, you should see a help section at the footer of the site. They were very responsive and helped on a couple of other issues I had. Reach out to them for the fix from support or via their Facebook page.
Candace
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.