Customization #1

Hi there,

- I did something for Target: https://gpsites.co/target/

First, enable this option:
https://docs.generatepress.com/article/navigation-as-a-header/

Set the navigation width to full and inner navigation width to contained, then aligment to right
https://docs.generatepress.com/article/navigation-layout/

Add this CSS:

.main-navigation:not(.slideout-navigation) .main-nav {
    flex-grow: 1;
}
.main-navigation .main-nav {
    text-align: center;
}

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

This article explains how to add icons and align them to the right:
https://docs.generatepress.com/article/adding-icons-to-menu-items/

- You will need to create 2 columns inside the page hero content, this article shows you the example HTML and CSS for 3 columns:
https://docs.generatepress.com/article/split-header-three-sections/

Let me know :)

Hello Leo,

Thanks for your response.
I have done everything, but I'm having some difficulties with the icons and the Hero.

- The icons I try to integrate them directly via HTML, however, only Facebook seems to work.
https://imgur.com/a/UgiIhyd

- For the 2 columns, the tutorial you mention is for the header navigation and not exactly the Hero.
I have done my best with Elements, but I think I lack some technical knowledge for this.
https://imgur.com/a/ma0cUyS

---------

New Questions:
- I have established the Width of the website to 1200px. However, is it possible to reduce this number on posts without Sidebar? I would like to reduce it to 800px. Just the content area, without the Wallpaper and title (since for these I want two columns as I told you before).

- Also, is it possible to make the Logo on the navbar disappear instead of creating two rows? This happens when I reduce the size of the window.
https://imgur.com/a/QG0IbHG

Thanks in advance

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

And please open new topic(s) for separate questions so it's easier for us to track.

Thanks and let me know :)

Hey Leo,
I'm using local Flywheel to do it. And as you know, their share functionality is quite limited.

If you need I can give you access via TeamViewer or something similar.

Any chance you can duplicate the site on a live server?

I'll need to inspect the code for most of the problems to be able to help.

Thanks!

Hey!

I will try to do it then.
As soon as I have it, I'll let you know.

Thanks

Hey Leo!
I have added the URL of the website on the first post.
Take a look.

Also, I wanted to let you know that I use "Elements" to solve this:
– "I have established the Width of the website to 1200px. However, is it possible to reduce this number on posts without Sidebar? I would like to reduce it to 800px. Just the content area, without the Wallpaper and title (since for these I want two columns as I told you before)."

Is amazing what Elements can do! :D
Even a noob like me was able to solve that fast.

Anyway. I have also noticed that in the URL of that post, you can't see the icons of social media, but if you go to the homepage you will see them.

Thanks!

So the 4 icons that aren't working are using FA5.

If you change the prefix to fa instead of fab, then it should use FA4 and it should work.

Glad you figured out the other issue :)

Indeed, that solve most of them, but not discord:
<i class="fa fa-discord"></i>

However, what about the other points? Can you help me with those?
-Also, is it possible to make the Logo on the navbar disappear instead of creating two rows? This happens when I reduce the size of the window.
https://imgur.com/a/QG0IbHG#LsaepPB

-For the 2 columns, the tutorial you mention is for the header navigation and not exactly the Hero.
I have done my best with Elements, but I think I lack some technical knowledge for this.
https://imgur.com/a/ma0cUyS#IjFYxk3

- I'm not sure why that icon isn't working. Maybe it's only available in FA5. Worth checking on their website.

- What if we try increasing the breakpoint so it turns to toggle when the navigation jumps to the next line?
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

- The HTML and CSS should be exactly the same whether you are adding it as page hero content or hook content.