[Resolved] Contactdata in Header

[Jenny]

Hello, good morning my helpful friends 🙂

I wanted to have the contact-Data in my header. So I found the following.
https://docs.generatepress.com/article/header-widget/

that’s fine.

is there a possibility to show the widget on the left site of my canvas navigation? floating right?
is there a possibility to hold while I scroll the page? the widget is invisible at scrolling.

Thanks a lot 🙂
Jenny

[David]

Hi there,

instead of using the Header Widget – create a new Block Element:

https://docs.generatepress.com/article/block-element-overview/

Add a GB Container Block with zero padding to contain your contact info. With the GB Container Block selected in Advanced > Additional CSS Class(es) add: hide-on-mobile

Set the Hook to generate_menu_bar_items

This will make it appear in the sticky and within the same container as the Menu toggle.

We can the use some CSS if necessary to move it to the left of the Menu Toggle

[Jenny]

Thanks – that’s great. Do you know – how I get the font smaller?

http://www.designhoch10.com

[Ying]

Hi Jenny,

Try use Headline block of Generateblocks instead of Paragraph block.
https://docs.generateblocks.com/article/headline-overview/

You’ll be able to control the font size without using CSS.

[Jenny]

Dear Ying 🙂

Thanks, I tried this already. My font is just a 5, but it seems something is overwriting the style.

[Ying]

I see, go to Customizer > Typography > Primary Navigation, click the mobile icon and try to set the font size.

See if it works. Let me know 🙂

[Jenny]

Thank you so much, that worked.
One last question to this task. I just want to have the text in 1 row, not in 3.

https://ibb.co/wyNgY7M

Have you got an Idea to fix this, too?

[Ying]

You can try this CSS:

.gb-container.gb-container-c37d8f57 .gb-inside-container p {
    display: flex;
    flex-wrap: wrap;
}

But if you were using Headline block of Generateblocks to add the links, and use the inline-width option, you wouldn’t need CSS to achieve this.
https://docs.generateblocks.com/article/headline-overview/#spacing

[Jenny]

Thank you so much Ying 🙂
one last question.

Now the text is not in the middle of the menu-item.
Is there a possibility to put the menu-icon in the desktop-version (only sticky) a little bit more to the bottom?
(link in the private-field)

[Elvin]

Hi Jenny,

Any chance you could provide a mockup image of what you mean?

If you’re aiming for something of this alignment? – https://share.getcloudapp.com/geuggp42

If so, try adding this CSS:

@media(min-width:769px){
span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
    transform: translateY(10%);
}
}

You can play around with the percentage value if you wish to do incremental adjustments.

[Jenny]

Dear Elvin, sure 🙂
https://ibb.co/bR5drMg

Have a look. Thank you for helping me.
I have to learn that all once. Than I can transfer this to my customers.

[Elvin]

Here’s a suggestion:

Let’s clean up the block element that adds in the link first. There’s an empty paragraph block inside of it.

Also, remvoe the margins on the elements and instead, add padding top 7px to its main container block to offset the spacing caused by the read status bar.

You then add this CSS:

span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon a {
    display: flex;
    height: 100%;
}

h3.gb-headline.gb-headline-ccd0aa56 {
    margin: auto 0;
}

this will be the expected effect – https://share.getcloudapp.com/04u22L95

[Jenny]

Dear Elvin,

thanks a lot 🙂 I put it in, I cleared my Browser and Page-Cache. But it didn’t worked. Can you have a look again?
Link in private Field.

[Elvin]

Add this as well:

.menu-bar-items span.gp-icon.pro-menu-bars svg {
    top: 0;
}

And if you want the items to be centered on the white background of the header, you’ll need to offset the space taken by the reading status bar on the top most of the page.

add this CSS:

#sticky-navigation .menu-bar-items {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 7px;
}

It’ll work like this – https://share.getcloudapp.com/nOuPvDK8

[Jenny]

Thanks a lot – in your video it works fine – but on my page 🙈🙂
If you want to I can share my credentials in the private-field.
Than you can test on the page. I will make a backup before.

[Author]

Posts