[Support request] Need help emulating another generatepress site

[Chris]

Hey guys,

I’m trying to emulate a site that uses generatepress also and can’t quite get it to look right.

woorkup.com

-I can’t get my logo to show bigger like on this site. It shrinks mine. It’s a 500×100 pixel image.
-How did they get the border around the main content?
-How can I get the right sizing of where the content area is located as well as the sidebar?

Thanks in advance.
Chris

[David]

Hi there,

the Navigation Logo sizes itself to fit the height of the navigation which is defined by the menu height. Your logo also has a lot of transparent space around it, removing this from the image would increase its size.

The shadow border has been added using this CSS:

.separate-containers .inside-article {
    box-shadow: 0 0 27px 0 rgba(214, 231, 233, 0.35);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 3px;
}

The right sizing part, can you clarify this.

[Chris]

Hey David,

Thanks for the response. Generatepress support has been great.

As far as the sizing portion. If you look at both the sites side by side, the main content and sidebar are a little off. Is there any padding suggestions and which ones to change you can make. Is there a way to figure out their padding numbers?

Also, on the mobile version, how can I get my header and drop down to look like this sites as well?

Sorry for the vagueness.

[David]

So the woorkup site has an 1100px container. And the top, right, bottom padding is 25px as opposed to yours is 27px. And thats about it really.

[Chris]

Alright I’ve got pretty much everything how I want it. Thanks for your help.

The last thing I can’t get right is to center my logo on the mobile version only.

I’ve researched this in the documentation to avoid asking you something that’s been answered but none of the css worked for me.

I’ve tried:

#mobile-header .site-logo {
position: absolute;
left: calc( 50% – 90px); /* 50% from the left – half your image width */
}

#mobile-header button.menu-toggle {
position: absolute;
left: 0;
}

and:

@media (max-width: 768px) {
.main-navigation .main-nav .sf-menu>li {
text-align: center;
}
}

Neither works and the logo is still left centered.
I also tried turning on and off the mobile logo.

[David]

The woorkup site doesn’t use the mobile header. Deactivate that and then you should be able to get to that result.

[Chris]

Hey there,

I did deactivate the mobile header and I still can’t get the header on mobile centered?

Any ideas?

[David]

Try this:

@media (max-width: 768px) {
    .main-navigation .navigation-logo {
        display: inline-block;
        max-width: 100%;
        float: none;
    }
    .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
        display: block;
        float: none;
        width: auto;
    }
}

[Chris]

Boom!

Worked like a charm.

Love your guys support!

[David]

Awesome. Glad to be of help 🙂

[Author]

Posts