[Resolved] Problem header

[Inmaculada]

Hello,
What could I have done wrong?
I can not configure the header from generatepress.
I configure it from elementor pro and when I put it in gp it appears menu and logo but not the header.

Imagen in Elementor:
[IMG]http://i65.tinypic.com/xnelxt.png[/IMG]

Imagen in GP:
[IMG]http://i63.tinypic.com/16ke368.png[/IMG]

[David]

So I assume the coloured bars above and below the logo / navigation are the problem.
The issue there is with Elementor. Those Sections do not contain any content so they collapse to zero height. Swap the widget in those sections with a spacer widget instead.

Or if you want we can help you style the GP Header to match.

[Inmaculada]

The problem is that something wrong I did in gp because I did not leave header and since gp I can not design the header.
Now I guess it gives me item problem or because gp has no space to put header, just space to put menu.

These commands did not work before creating the header with Elementor and now neither.

[IMG]http://i65.tinypic.com/4qgdg1.png[/IMG]

[David]

Hi there, it looks like you used the Elemntor Header Template. Which replaces the GP Header so those customiser settings won’t work as the GP header has been removed.

The missing color bars in your elementor header are due to those sections having no content. Without content they wont be displayed.

If you want we can walk you through creating that with GP only. Let me know.

[Inmaculada]

I deleted the entire Elementor header. Please help to create the original GP header.

[David]

OK, lets do the basics first. And then we can look at the little bit of CSS to add the menu underlines and the colored borders.

1. Customiser > Site Identity > Add Logo.
2. Customiser > Layout > Header > Alignment = Left.
3. Customiser > Layout > Primary Navigation > Float Right.

Do that and let me know 🙂

[Inmaculada]

Ok, the logo has not yet been designed. The rest is already.

[David]

OK, can you add a temporary logo? like the one you used in your image, it will help with styling it. And please make sure the Primary Navigation > Navigation Location is set to Float Right.

Then we need to change colors. So:

1> Customiser > Colors > Header – set the color here to match your background.
2. Customiser > Colors > Primary Navigation:
Background Color: Set to transparent by selecting the color and dragging the second slider to the very bottom.
Do the same for the Background Hover and Background Current.
Then change your text colors to what you want.
3> Customiser > Additonal CSS paste this code:

.main-navigation .menu>.menu-item>a:hover:after, .main-navigation .menu .current-menu-item a:after {
    content: "";
    position: absolute;
    right: 50;
    left: 50%;
    bottom: -1px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 80%;
    height: 2px;
    background-color: currentColor;
    -webkit-transition: 0.3s width ease;
    transition: 0.3s width ease;
}

[Inmaculada]

1. Logo temporal
2. Primary Navigation > Navigation Location is set to Float Right.

if I do those steps this is the result

[IMG]http://i63.tinypic.com/345iib5.png[/IMG]

I do not have a head, it does not exist!!! :`(

[David]

OK, it looks like you are using Elemntor header footer plugin, can you disable this.

[Inmaculada]

Oh, you are David…Copperfield

I’ve been with the header problem for 4 days.
I have done everything you have told me and it is already solved.

I will not bother you anymore. Many thanks. 😉

[David]

Ha ha – thats great! Let me know if you need anything else!

[Author]

Posts