How to inline all elements in header

Hi Adarsha,

You’re correct, you would need some custom CSS to achieve this:

For instance:

nav#site-navigation {
    margin-right: auto;
}

Similar to the link you provided, this will place the menu in the middle relative to the elements in its right and left.

For the layout of the Header widgets, you can try placing them inside a Grid Block so that the Social Icons and the search button are inline.

Example: https://share.getcloudapp.com/GGulRmzd

Then, you may add the necessary spacing to achieve a similar look to your reference site.

With regards to the border radius of the search button, here is a sample code you may try:

input.wp-block-search__input {
    border-radius: 10px;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

With regards to the fixed Header with a shadow, here is a CSS you may try:

header#masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0px 4px 5px black;
}

Hope this helps! :)

Thanks Fernando for the detailed answer.
Too bad I have to use so much css.

I did everything you mentioned. Change the color of shadow to get it right.

Some issues I have is, I have to add way too much margin to social icons for them to move towards the left. Over 130. The main reason I'm skipping from divi is because it caused too much CLS due to all the margins and padding I added. Won't same issue happen here?

Further, how can I add spacing between each social icon? It's too close now.
Also the social icon is not in center vertically compared to other 3 elements on menu.

Also adding that code for shadow is moving the bottom part of screen below header to merge with header.

To confirm, where would you like the social icons placed? Are you wanting to place it similar to your reference site? Margins and Paddings shouldn’t be causing CLS. One reason this could cause CLS is if the stylesheet to add the margins are loaded late which shouldn’t be the case.

You can also use Buttons Blocks to add the social icons which would give you more options for modifications.

For instance: https://youtu.be/1E7zFl678kg?t=419

Through this, you wouldn’t need further CSS code.

Moreover, with regards to the Fixed Header, one alternative is to use the Sticky Menu which is available through Appearance > Customize > Layout > Sticky Navigation but this would result in something different from your reference site.

If you have a fixed header, you’ll need to offset the height of this header as a margin to your content. For instance:

div.site.container {
    margin-top: 131.8px;
}

Hope to hear from you soon. :)

I'm happy with current social icons. Just wanted to know that huge margins and paddings won't cause CLS.
The issue I asked about is, how I can add spacing between icons and align them in middle.
I have attached a screenshot to show what I mean. I wish there was a way to move them around rather than using css for each part.
As it would get super congested if we do so much css by the time whole website is completed.

Hi there,

If you want to style and position them without CSS then remove them, and use a GenerateBlocks buttons block.
You can add an icon, your can remove the text label, and you can style them however you want in the block settings.

https://docs.generateblocks.com/article/buttons-overview/

How can I use generateblocks in Customizer? Header customizer has not options for generateblocks right?

Make the edits in Dashboard > Appearance > Widgets there you have access to the 'full' block editor.

Thanks that helped. Hope the margins i'm adding to move them won't cause cls.

Is there a way to reduce the size of header as I scroll down the page? As in the shrink effect

Margins and other CSS properties won't cause CLS.

Not using the CSS Sticky method. Perhaps just reduce the Header padding to minimise its height for all views

I don't mean always. I wanted a way for header to shrink as I scroll.
I had similar effect on divi aswell. (Now removed to test if it caused issues)

If you use the GP Sticky Navigation it can shrink on scroll.... but it won't work with Header Widgets, it will only be the Navigation that is sticky.