[Support request] new site questions

[Gary L]

Hi,

I really like this site: site demo

Can you tell me how he got the bar across the top that follows the scroll down the page?

Thanks

[Leo]

Hi Gary,

That’s a sticky navigation.
https://docs.generatepress.com/article/sticky-navigation/

[Gary L]

Thanks for that.

here’s the site I’m rebuilding: solar panels

1. why do the middle menu items not show? They show in the cutomizer.

2. How do I get rid of the header area below the top menu? I want the page text near it like the demo site.

3. What do I look for in a background image that will work like the demo site? I’m using placeholders for the menu image and the one in the back ground is only 100 px square.

Thanks

[Leo]

1. Because you have the color and background color both set to white. Head to Customizer > Colors > Primary Navigation and change it to something else then you should be able to see them.

2. Customizer > Layout > Header > Header Padding and set all of them to 0.

3. The demo site (http://demo.generatepress.com/) is actually using the Page Header addon. You definitely want a big image with width at least the size of your container (Customizer > Layout > Container Width)

Let me know if this helps.

[Gary L]

Hi, yes all that worked perfectly. A background image that large on number 3. would cause slow load time wouldn’t it? Unless they cascade it somehow? or repeat?

Thanks

[Leo]

Oh wait I think I got confused. Thought you talking about GP’s demo site.

Hmm the site you are looking at is using a 1375x950px background image (http://gce.solar/wp-content/uploads/2016/10/Genesis-Solar-Background-4.jpg)

Not sure what your 100×100 image is but you can definitely use it and set it on repeat if you want.

[Gary L]

Hi,

If you can look at the site again, I have it pretty much how I want it except I’m going to look for a much smaller pic I can repeat for background. That would effect load time if it was big, correct?

Also I used the css from my last thread to curve boxes…the only thing not curving is the footer container.

I used the part of the old code:

.widget, .inside-article, .one-container .container {
border-radius: 10px;
border: 1px solid #000000;
}

.one-container .inside-article {
background-color: #ffffff;
padding: 1px 10px;
}
may be overkill and affect something later on or did I get it right or ?

[Leo]

Yup smaller images (in terms of file size) would reduce load time for sure. Probably unnoticeable difference to normal users though.

Looks like you were using one container for the last site so I would slightly modify the code for this one:

.separate-containers .inside-article, .widget {
    border-radius: 10px;
    border: 1px solid #000000;
}

Then go to Customizer > Layout > Footer > Footer Widget Area Padding > 0 0 0 0

The second block of code with the background color and padding is not needed so you can remove that.

Let me know.

[Gary L]

Thanks for cleaning up the code.

How do you keep the background image sticky as you scroll down?

[Leo]

Customizer > Background Images > Body > Third dropdown box > Fixed

Let me know.

[Gary L]

Hi,

Looking good. I’m really nit-picking now but on the footer container and black bar at the bottom, I would like to curve those also. I looked at them in firebug to see if I could figure it out but thought I should ask what you look for or is that how it is done?

I wouldn’t want to set something that would mess up the mobile and such.

thanks

[Leo]

First Remove the hex code in Customizer > Colors > Footer Widgets > Background to make it transparent.

Then add this CSS:

.footer-widgets .widget {
    background-color: #ffffff;
}
.site-info {
    border-radius: 10px;;
}

[Author]

Posts