Mobile Responsive issues with Glam Pro

[candacegodwin]

Has 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.com

[William]

Yep 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 !

[candacegodwin]

Hi 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";
}

[William]

Hi 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 !

[candacegodwin]

Hi 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

[William]

Dear 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 element

Add the CSS attribute of position: absolute; to the arrows

Of 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 !

[candacegodwin]

William,

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

[stampintink]

Hi 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.

[candacegodwin]

Hi, 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

[Author]

Posts