Custom header with logo left and on the right side manu with text underneath

Hi Dorothee,

You can use a block element instead of the header element, use generate_after_primary_menu hook.

Then add this CSS for the orange border underneath the header:

.site-header {
    border-bottom: 6px solid #ff6f01;
}

Hello Ying,

I created a block element and selected after_primaey-MENU for it
but the text is placed behind the menu not beneath.
as you can see on the following page.
aussehen

In the content part of the page I placed a picture with screen shots of what I did.
Kind regards
Dorothee

I created a block element and selected after_primaey-MENU for it
but the text is placed behind the menu not beneath.

Can you leave it there so I can see what CSS is needed to adjust the layout?

Do You mean, leave the page "testhead" published?

Hi there,

can you:

1. REMOVE this CSS:

.inside-header {
    padding: 10px;
    padding-bottom: 0px;
    width: 60%;
}

2. Add this CSS:

.main-navigation .inside-navigation {
    justify-content: space-around;
}

You may want to add some space between menu item and below text - some options are:

1. Increase the Menu Item Height in Customizer > Layout > Primary Navigation
2. Add some top padding or margins to your Container Block in the Block element

Hello David,

your support is awsome - I don't think there is another theme beside generatepress and generateblocks where you get answers that fast.

Originally I did the header with ELEMENTOR Pro and it worked.
But as I prefer to work with generateblocks instead of Elementor your answer is very much appreciated.

Kind regards
Dorothee

Hello David,

unfortunately the text of which telefonnumber to dial is not shown on mobile.
Would you also have a solution for that case?

It is important to see that text, as this is the alarm number you have to dial in case of a missed person.
Unfortunately mobile phones are widely used in that case.

Ah yes we need to force it to be displayed with a little CSS like so:

.main-navigation .inside-navigation .gb-container.gb-container-eb2eb077 {
    display: block !important;
}

However - I would suggest that if you edit the Block Element - and select the Container Block, give it an Advanced > Additional CSS Class(es) eg. telephone-bar

Then you can use that selector in your CSS instead:

.main-navigation .inside-navigation .gb-container.telephone-bar {
    display: block !important;
}

Its better then relying on the unique ID selector that GB generates.

Hello David,
that works just fine.
If ever you get lost in our area you can dial that number and one of our team will help to find you.

Kind regards
Dorothee

Glad to be of help !