[Support request] editing widget in vertical header

[T]

Hello,
I am using Navigator theme because I want the vertical header.
I can’t seem to figure out how to change:

the width of the gray hover box for each menu. I need it to stretch to the end of both left & right.

How to adjust the size of text field & the button of search widget and email form widget? and how to make the text field and the button in one row? currently they take up 2 rows and its ugly. The widgets are from Appearance -> Widgets
Is there a way to change the color or size or anything?

Is there a way to edit the vertical header in Elementor pro?
I had to purchase GeneratePress Primium only because I wanted to use vertical header with Sider or Navigator theme but they both are not worth much when it comes to flexibility. I thought I was able to edit the vertical header in Elementor pro but I can’t.
As far as I know, Elementor pro cannot create vertical header.
But, even with the vertical header theme which I had to purchase, is not flexible and limited.

FYI, https://prnt.sc/o5dy3h

Or is there another better way to have vertical header?

Thank you.

[Tom]

Hi there,

1. Try this CSS:

#site-navigation {
    width: 100%;
}

Then you’d need to set the left/right header padding to 0 in the Customizer.

2. The button/form colors can be set in the Customizer. To get them on one line, try this CSS:

.woocommerce-product-search {
    display: flex;
    width: 100%;
}

.woocommerce-product-search button {
    margin-left: 5px;
}

.prdtsearch {
    width: auto;
}

3. Elementor Pro can’t be used to edit the header. However, we’re happy to help you adjust it as needed 🙂

[T]

Hi Tom,
Thanks for your reply.
That works.
Can you help me with the Mainchimp sign-up form as well just like the search bar?

Also, how do I add links to those social icons?

Just wondering, are you planning to add vertical header option somewhere in the Layout section? It’d be great to have it there and allow to put search bar, newsletter bar, social icons, and cart icon etc.
Or if your theme somehow makes Elementor able to edit the vertical header soon. This would be awesome.

Thanks.

[David]

Hi there,

for the mailchimp signup try this CSS:

.mc4wp-form-fields input[type=email] {
    width: 60%;
    margin-right: 5px;
}
.mc4wp-form-fields input[type="submit"] {
	width: calc(40% - 5px);
    padding: 10px 0;
}

The Social Icon links are added as a Navigation Widget in Customizer > Widgets > Header. Go to the Customizer > Menus and look for the Social Icon menu and edit the links of each of the menu items.

We don’t see a huge amount of requests for the Vertical Header, hence why we created the two Sites for those users who do require it. The only tricky part is it does require CSS to customize the layouts but it actually behaves the same way as the standard site header in regards to adding menus and widgets. Things like Cart icons if added to the normal nav will appear in there. But as i said does take a little CSS to get it right.

Regarding Elementor – it wouldn’t be impossible to hook an Elementor vertical header into the site, but Elementor comes with its own set of complexities for this which isn’t something we would integrate into the Theme dues to dependencies and potential code redudancy or breakages when Elementor updates. But we’re always open to feedback and considering your points we may look at some other Vertical Nav sites to make this easier.

[T]

Hi David,

Thanks for your reply.
Now I understand why vertical header require extra css especially when think of a page builder.

Now, I am trying to get rid of all the things in the vertical header. I was able to hide the logo and remove the widget via theme setting and wordpress widget area but one thing I don’t understand is:
why all the page names show up now as you can see,
https://prnt.sc/o5owsn
Tried to release all assigned main menu(primary) everywhere but all the page names show up without knowing the reason.

I somehow found a way to hide those by checking Primary Navigation under Disable Elements from here: https://prnt.sc/o5p203
Contact page is the testing page I am working on to show you.
After I did that, the page names are gone but the pink nav area added by elementor widget now got shrunk and the upper space still remains there.
FYI, https://prnt.sc/o5p42g
The pink nav area was full-width within the header area as you can see ( https://prnt.sc/o5owsn ) but now it got shrunk.

The reason I am trying to insert Elementor nav box in the header is because it gives more flexibility to edit whenever I need it without touching the code or getting help from other people.

Would you also help me with how to hide the big gray area with big title in it? I can’t figure out how to hide it.

Thanks a lot in advance.

[David]

WordPress automatically assigns a menu ( of all pages ) if one doesn’t exist. To remove this create a new Menu name it Blank and do not add any menu items to it. Then assign this to the Primary Navigation.

The big grey box is coming from the Header Element.
Go to Dashboard > Appearance > Elements – look for the header element and delete it.

[T]

Hi David,

Thanks for your answer.
I did as you said, FYI:
https://prnt.sc/o66spa

But, the empty big space is still up there and bottom of the header also has about 40~50px white empty space.
FYI: https://prnt.sc/o67vi6

FYI: Elementor setting of the nav header is:
https://prnt.sc/o67ruz

If I remove the .header-widget class,
https://prnt.sc/o67wx6
the pink section goes to top:
https://prnt.sc/o67y6v

but if I put the class back, the pink section goes back to where it was before with the big top space and narrow bottom space.
I don’t really know about css but I tried as much as I can.

Please help.
Thank you.

[David]

In Customizer > Additional CSS look for and deleter the 2 lines i have commented below:

.header-widget {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin-top: auto; /* Remove this line */
    margin-bottom: 20px;
}

.nav-float-right .header-widget {
    float: none;
    top: auto; /* Remove this line */
    max-width: 100%;
}

[T]

David,

I did what you said.
But now… the top space got shrunk to like 20px and bottom one remains as like 30px. You might be able to see the gaps better on a browser that is not logged into wordpress admin.
FYI: https://prnt.sc/o6ptq9

Would you be able to take a look at my admin if that’s easier for you to give better solution? If you give your email I can create another user and give you the login info.

Thanks.

[Tom]

Can you try adding this?:

.site-header #site-navigation {
    display: none;
}

.nav-float-right .header-widget {
    top: auto;
    max-width: none;
}

[T]

Hi Tom,
That didn’t work either but thanks for trying helping me.

[Tom]

I’m not seeing any vertical gaps anymore, but I do see big gaps on either side now. I adjusted the CSS above to fix that: https://generatepress.com/forums/topic/editing-widget-in-vertical-header/#post-942054

[Author]

Posts