[sangfroidweb]

Hi! The images are set as background images on the full-width home page sections so they cover the full width, but any content added into a widget area in these same full-width sections is constrained by the 'wrap' div to a max-width of 1200px. It can likely be overcome with some custom CSS. If you add it to the page in the section where you want it to be so I can see it, I can likely help with the CSS.

Thanks!
Liz Eisworth | SangFroid Web

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi there!
You can edit line 1421 of the stylesheet to add the background color you want (background-color: #f5f5f5;) to the secondary nav 'wrap'--- so that line 1421 will read:

.nav-secondary .wrap {
background-color: #f5f5f5;
border-bottom: 1px solid #222;
}

Or, if you are not working directly in the stylesheet, but are using the Additional CSS box, then you can add this to the Additional CSS box:

.nav-secondary .wrap {
background-color: #f5f5f5;
}

Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi there! It looks like this is happening because there is an unclosed <b> tag up in the hero that is confusing the opening/closing of elements further down on the page.

When you view source on the page, it's at line 163. It's this line:

<b>Subscribe now and get Discount Codes for Fingerstyle Guitar Lessons.<b>
(the closing b tag is missing the slash)

I changed it locally on my machine and it seemed to correct the issue.

Whenever a page is doing something crazy I can't figure out, I run it through the W3C validator looking for any unclosed elements. They almost always cause a problem.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fjpaliotto.staging.wpengine.com%2F

Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi! The font size for the menu item is being governed by ".genesis-nav-menu a" on line 2717 of the stylesheet. To change the font size, you will need to modify the font size specified there on line 2717. Here is the css from that line where the font size is set to 12px/1.2rem...

.genesis-nav-menu a {
border-bottom-width: 0;
color: #232525;
display: block;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.5px;
padding: 10px;
text-transform: uppercase;
}

You'll notice there are 2 lines that specify the font-size. Be sure to change both lines that reference the font size. So, as an example, if you wanted it to be 14px, change both of those lines respectively to:

font-size: 14px;
font-size: 1.4rem;

Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi there! It looks like the .menu-toggle styles for the responsive menu are missing from your Altitude Pro stylesheet which is making the responsive menu icon display all the time. That's the menu button you are seeing.

Check the demo stylesheet here https://demo.studiopress.com/altitude/wp-content/themes/altitude-pro/style.css?ver=1.1.3 and search for .menu-toggle to see what's missing from your stylesheet.

This is also making your regular menu appear on mobile devices when the intended functionality is for the regular menu to disappear and the mobile menu to appear on mobile devices. I can't say why that CSS is missing exactly, but you will likely have to reconstruct it from the demo/default stylesheet.

Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi!
Yes, it looks like you need to add an !important b/c the original CSS specification has an !important...sorry, missed that the first time. So just edit the CSS you just added to include an !important so that it overrides the other like this:

.site-header.dark .site-title a {
background-image: url(http://www.twostoriesmedia.com/site/wp-content/uploads/2017/10/Two_Stories_Media_Logo_HorizontalF_white_smallest3.png) !important;
}

That should do it, but let me know!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi there!
Sorry, I should have been more clear...you will need to add this CSS to the stylesheet. There isn't currently any CSS that addresses the .menu-primary, so we are just going to add it. Try adding this to the stylesheet right underneath the other CSS for the menu (around line 1160).

.genesis-nav-menu.menu-primary a {
color: #fff;
}

.genesis-nav-menu.menu-primary a:hover {
background-color: #3c8622;
color: #fff;
}

Let me know how it goes!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi again!

To adjust it on mobile...On line 1958 reduce the padding of .site-header .wrap:

.site-header .wrap {
padding: 20px 0;
}

Change "padding: 20px 0;" to "padding: 5px 0;" (or whatever you prefer)

...and on line 1954, reduce the bottom margin of .site-header .title-area:

.site-header .title-area {
padding-bottom: 16px;
}

Change "padding-bottom: 16px;" to "padding-bottom: 0px;" (or whatever amount you prefer.

Hope that helps!
Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Great! Glad to be of help. When you have time, be sure to mark the topic as 'Resolved' if no further issues.
Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

You're welcome! When you have time, be sure to mark the topic as 'Resolved' if no further issues.
Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Great! When you have time, be sure to mark the topic as 'Resolved' if no further issues.
Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi there! Here is the CSS to accomplish it. This changes the colors on the menu items in the .menu-primary (which is where the second menu is). You can adjust the hex code of the lighter green to be the color you prefer...I just picked a color. 🙂

.genesis-nav-menu.menu-primary a {
color: #fff;
}

.genesis-nav-menu.menu-primary a:hover {
background-color: #3c8622;
color: #fff;
}

Hope this helps! Let me know if not, and we can help you get sorted out.
Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi Mark!
You are on to the solution by looking at changing the font size of the site title. The issue on mobile is that the text of the title one word (which means the text doesn't wrap by default) and at the current font size it is too large to fit on smaller phone screens (less than 400px), so it's hanging over and interfering with the layout at that size.

To adjust that, you can adjust the font-size for the .site-title element on screens less than 400px wide by using the following css. You can add this to the bottom of the stylesheet.

@media only screen and (max-width: 400px) {
.site-title {
font-size: 38px;
font-size: 3.8rem;
}
}

38px seems to fit even on iPhone 5, but you can obviously adjust that to whatever you prefer.

Any global changes to the h1.site-title can be made at line 1271 which is:

.site-title {
font-weight: 700;
font-size: 48px;
font-size: 4.8rem;
font-weight: 700;
line-height: 1;
margin: 0;
text-transform: uppercase;
}

The color of the .site-title is applied to the a tag inside the h1, so if you want to change the color of the site-header text, you'd need to adjust the color of the a tag on line 1283 of the stylesheet which is:

.site-title a,
.site-title a:focus,
.site-title a:hover {
color: #000;
}

I hope this helps! Let me know if I misunderstood the questions.
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi there,
You can reduce the height of those areas by adjusting the padding on the menu items and the .site-header .wrap.

On line 1133 of the stylesheet:

.genesis-nav-menu a {
border-right: 1px solid #e3e3e3;
color: #000;
display: block;
padding: 20px 24px;
position: relative;
}

Reduce the padding from "padding: 20px 24px;" to something less, like "padding: 10px 24px;" (or whatever amount you prefer)

On line 1025 of the stylesheet:

.site-header .wrap {
padding: 40px 0;
}

Reduce the padding from "padding: 40px 0;" to something less, like "padding: 20px 0;" (or whatever amount you prefer)

Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi Dawn,

The way we usually handle this is to add some additional CSS to the stylesheet to use a different logo when the user has scrolled down.

The Altitude Pro theme has a class (.dark) applied to the .site-header element when scrolled that makes this possible.

This is the CSS that you would need to add:

.site-header.dark .site-title a {
background-image: url(URL TO THE LOGO YOU WANT TO USE);
}

Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi there!
On line 1215 of the stylesheet, there is a typo that I believe is causing the issue with the header logo.

This is what is in the stylesheet currently...

.header-image .title-area {
margin-bottom: 4px;
margin-top: 3px;
min-height: 45x;
padding: 0;
width: 200px;
}

Where is says min-height: 45x; ...change it to min-height: 45px;
That seems to fix it for me in the inspector.
Hope that helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hey there,
If I'm following you, you'll need to put the background on the .site-container-wrap element.....but then you will also need to make the background color of the .site-header element transparent so you can see the background image coming through from underneath.

On line 582 of the stylesheet add the background image to the .site-container-wrap

.site-container-wrap {
background: #fff url(/blog/wp-content/uploads/2017/10/body-bkgd.jpg) no-repeat 0 0;
border: 1px solid #e3e3e3;
margin: 60px auto;
max-width: 1140px;
}

On line 1254, make the background color transparent:

.site-header {
/* commenting this out - background: url(/blog/wp-content/uploads/2017/10/body-bkgd.jpg) no-repeat 0 0; */
background-color: transparent;
border-bottom: 3px solid #000;
}

Also to note...if you only want this to happen on this Blog page, instead of changing those declarations in the lines referenced above (which will affect ALL .site-container-wrap and .site-header elements), you will need to add the CSS with the declarations specific to the blog page by adding the .blog selector (see below)

.blog .site-container-wrap {
background: #fff url(/blog/wp-content/uploads/2017/10/body-bkgd.jpg) no-repeat 0 0;
border: 1px solid #e3e3e3;
margin: 60px auto;
max-width: 1140px;
}

.blog .site-header {
/* commenting this out - background: url(/blog/wp-content/uploads/2017/10/body-bkgd.jpg) no-repeat 0 0; */
background-color: transparent;
border-bottom: 3px solid #000;
}

Hope this helps! Let me know if this is not what you meant and we'll try to help you get it sorted out.
Thanks!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

No worries, Ken. I have seen what you are talking about, where the menu appears open for a fraction of a second, and it most likely has to do with how long it takes the javascript for the menu-toggle button to load on the first view. After that first view, it's stored in the cache, so you may not see it after the first look. That's what I'm seeing on your site....only when I clear cache and refresh do I see it flash for a second. As far as what to do about it, it's unfortunately not my area of expertise. Sorry!...wish I could help more, but try asking in a new question, and maybe someone else will have some advice.

Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

...and actually, you may need the margin to remain 0px on the home page...so this would be what you need...

@media only screen and (max-width: 782px) {

.site-inner {
margin-top: 30px !important;
}

.front-page .site-inner {
margin-top: 0px !important;
}

}

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

Hi again!
I see what you mean...this theme is using jQuery to dynamically add the margin to the top of site-inner. Without having to get into the functions file to edit that code, you could just override it with an !important. In that previous bit of CSS I posted above, try changing the margin-top value to something like 30px (or whatever you'd like it to be) (inside the media query for max-width 792px) and include an !important. (see below) This seems to work ok when looking at it in the inspector.

@media only screen and (max-width: 782px) {
.front-page .site-inner,
.site-inner {
margin-top: 30px !important;
}
}

Hope it helps! Let me know if there are still issues.
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Author]

Posts