OK Problem 2 was resolved by adjusting middle container margin settings to % rather than px…
Problem 1 is still there…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you link a Webpage with the issue?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://ww.wp.xz.cn/plugins/custom-css-manager-plugin
Then use its “CSS Code” section of the dashboard to hold your CSS modifications:
Alternatively use your Child Theme style.css file to hold your CSS modifications:
@media screen and (max-width: 760px) {
#header {
padding-top: 0;
}
.mobile-button {
margin-top: 40px;
}
#main-nav.active {
margin-top: 74px;
}
}
Can you re-explain the 2nd question?
Thank you!
I was also emailed a similar fix from themify support.
They recommended this:
@media screen and (max-width: 760px){
.mobile-button {
position: absolute;
top: -70px;
left: 45%;
font-size: 3em;
}
}
I’ll try both.
The second question was simply me having set R and L padding on the middle container which compressed the content horizontally when viewed on a mobile device. I changed from padding to margins and pixels to percent and it’s much better now.
Well, yours wins!
Their version put the menu over the logo and shoved the log down over the main image!
Now i’m wondering how to get the drop down menu background to show up on the portion of the menu that drops down over the main image. I assigned it to white but it only is white in the header area. As soon as it goes over the body, the background turns invisible. Just the text links show up. Any thoughts?
Thanks for the help!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I may have updated the code while you weren’t looking, sorry. Try it again.
I didn’t see a difference adding the
#main-nav.active {
margin-top: 74px;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Oops, instead add this:
#main-nav.active {
bottom: auto;
margin-top: 74px;
}
Cool, I see how that’s moving the drop down menu down…
How can I make the background of the entire drop down menu white so that the links can read when overlapping the main photo?
And how can I narrow the drop down menu width?
Thanks for the help!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Uh! Forgot a style again!! This time I’ve double-checked, try this:
#main-nav.active {
bottom: auto;
margin-top: 74px;
height: auto;
}
Wow! Cool!
You’re the man!
Can I use
width: XXpx;
to control the width of that drop down?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sure, but to keep it centred add a “margin-left” style of half your width value. But use minus.
E.g. if you had a width of 130px you’d have a margin-left of -65px
Awesome – Thanks!
I was just figuring that out when I saw your response.
Need some extra work?
I could use some help on my magento site…
vanjacouture.com
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
😀 If it were work then it wouldn’t be fun
