Archived topic

Border Text on Home Page Hero & Centering LOGO and MENUS

9 replies · Started by Former User on August 19, 2019

Viewing posts 1–10 of 10

August 19, 2019 at 12:37 am #987618

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.

August 19, 2019 at 4:57 am #987748

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.

August 19, 2019 at 5:39 am #987778

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

The address is wateratyard.com should works.

August 19, 2019 at 5:40 am #987780

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

August 19, 2019 at 11:31 am #988215

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/

August 20, 2019 at 2:02 am #988624

For the border container i have edited the CSS here

For you navigation add this extra CSS rule:

.main-nav {
    flex: 1;
}

August 20, 2019 at 3:24 am #988678

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. :)

August 20, 2019 at 4:28 am #988710

Give this a go:

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

August 20, 2019 at 5:32 am #988741

David, Thanks! ;)

August 20, 2019 at 6:35 am #988791

You're welcome

This archived topic is closed to new replies.

Start building better websites today.