Border Text on Home Page Hero & Centering LOGO and MENUS

[Arkadiusz]

Hi,

I bought a few days ago GP. It’s a wonderfull theme 🙂 But I have to problems…

1. I want to add a border to my text at home hero. Like here: https://ibb.co/jgGGxYQ
I want to border be responsive. While user access via mobile device it will ie. extend.

2. I want to center LOGO and make menu items like in the photo here: https://ibb.co/jgGGxYQ 2 on left of LOGO and 2 on the right

Guys, Thanks from above for help!
A.

[David]

Hi there,

1. this article explains how to center align logo in navigation:

https://docs.generatepress.com/article/centering-logo-navigation/

2. Edit your Header Element and wrap your content in a DIV like so:

<div class="border-container">
    <h1>My title</h1>
</div>

Then you can style it with this CSS:

.border-container {
    padding: 25px 15px 10px;
    border: 4px solid #fff;
    box-sizing: border-box;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

BTW – i can’t access your Site – can you check the URL you provided if you need us to take a look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Arkadiusz]

David, thank you for reply.
I will check this solution 🙂

The address is wateratyard.com should works.

[David]

Cool that address works – let us know how you get on.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Arkadiusz]

David! Thanks, the border works!

How Can I center-vertically the text inside the box? And the second question is how I can narrower the left and right side of the box. Now I see the width of the border is a container (?) width.

About header – I made all things, which are described at docs. Please look below…. any mistakes which I could do?

Here is gallery with SS of my backend with all things https://postimg.cc/gallery/2d071uuk4/

[David]

For the border container i have edited the CSS here

For you navigation add this extra CSS rule:

.main-nav {
    flex: 1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Arkadiusz]

Can You tell me at the end what I have to change the distance between LOGO and items – https://postimg.cc/G4XZsR1K

After this, THANK YOU DAVID! I will recommend this theme to my friends. 🙂

[David]

Give this a go:

@media (min-width: 769px) {
    .main-navigation ul {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Arkadiusz]

David, Thanks! 😉

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts