[Support request] How do I get my site to look like this?

[Cedric]

Hey,
I’m working on my site right now and I’d really appreciate it if you could tell me what settings I have to make in order to achieve a site design that looks similar to this one:
bitcoin.org

So the header and main menu should be centralized above the content area as in the example, the content area does adjust to your screen I think but I’m not sure.
I want the content area to be a different color and the rest of the site should encompass it like a framework, same as in the site mentioned.
The edges should be soft and a little round if possible, but I really have no clue how to do that.

[Leo]

Hi there,

You can try adding the logo as a menu item here: https://docs.generatepress.com/article/centering-logo-navigation/#add-your-logo-to-the-navigation

Then set the alignment to center: https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

For colors, you can adjust the body background color and content background color in the customizer:
https://docs.generatepress.com/article/colors-overview/

Rounded border would be this CSS:

.inside-article {
    border-radius: 10px;
}

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

A link to your site might help if any of the above doesn’t work 🙂

[Cedric]

Hi,
thanks for the fast reponse.
Do I have to upload the logo to a third party site?
Because it says in the instructions here:
https://docs.generatepress.com/article/centering-logo-navigation/#add-your-logo-to-the-navigation

Now go to Appearance > Menus and add a new Custom Link.

As the URL, add in your home page URL (or whatever you like).

As the Link Text or Navigation Label, add in your logo image HTML:

So that would be something like:
< imgc src=”mypicture3333.com/logo” alt=”Sitename123″ title=”Sitename123″ />

[Leo]

That’s not a third part site. It’s adding it as a menu item using WordPress’ menu structure:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Cedric]

Hey,
so I still don’t know how to add the logo to the menu, specifically what to enter as img src.
Also I’d like to have a soft colored frame around the content area as in the site mentioned is that possible by chance?

< imgc src=”mypicture3333.com/logo” alt=”Sitename123″ title=”Sitename123″ />

I don’t get what to enter there as img src, doesn’t show my logo when I enter my websites’ URL.

[Leo]

It should be the URL of your logo image.

See the file URL on the right side of the image: https://codex.wordpress.org/Edit_Media

[Cedric]

Alright that worked thanks’s alot, now there’s 1 things left I need to do for now.

I wanna create a colored border around my content area, the container width is 900px, is there any way to do so?

[Cedric]

Actually one more thing, if I hover over my logo now it turns blue because I set a menu hover background, is there any way to get rid of it just for the logo?

[Leo]

Can you link me to the page in question?

Thanks.

[Cedric]

I want it to look as close as possible to this one:

bitcoin.org

So the menu should be closer to the logo, the logo more to the left.
There should be a border around the content area, and the blue background in the logo if you hover the mouse around it should not be there.
Would appreciate any help achieving a better result of course 🙂 , thanks.

[Heiko]

I am really impressed how patiently and persistently Tom and Leo answer all the questions here, even if they are no support questions at all! 🙂

@Cedric: If you want to have the logo on the left, just change the settings under Customizer -> Layout -> Hauptnavigation -> Ausrichtung der Navigation = Links.

I have no hover on your logo.

Border: add custom CSS

.inside-article {
    border-radius: 10px;
border: 2px solid #ebebeb;
}

Or you do these kind of stuff with Elementor, what you use on your site… 🙂

[Cedric]

Hey,
yeah they are really patient and I appreciate their support.
You get the hover if you move the cursor to the bottom left of the logo, only on the subpages, not the main page.
I want the logo to be slightly more left and remove the gap between the menu and logo if possible, I don’t want it to be entirely on the left, just a little more like this site: bitcoin.org

As for the border it was exactly what I wanted, thanks for that!

[Heiko]

This site has a left aligned navigation. You can do it on your own and than add CSS:

.main-navigation .navigation-logo img {
margin-left: 40px;
}

40px ist like bitcoin.org.

edit: Your logo is an item of your navigation. So maybe the solution above will not work. Try to use the upload function of GP to insert your logo (Customizer -> Layout -> Hauptnavigation). Then you get also rid off the blue hover. The hover appears again because your logo is an item of your primary menu and get the blue hover like all your navigation items.

[Author]

Posts