[Support request] Tob bar widgets allignment

[Omar]

Hello,
Thank you for your great support in helping us solve our issues and answer all our concerns.

Actually, I added some widgets to the top bar, but it looks weird as each widget has a very large space in between. You can check the attached screenshot to check what I mean.

One more thing, is there a way to make the logo continues from the header to the top bar? (there will be no space between the top of the logo and the browser).

[Elvin]

Hi Omar,

We can address the top bar alignment issue with custom CSS but if you want to execute this along with the other request of extending the logo to the top bar, the approach would be completely different.

If I may suggest:

Consider removing the top bar and instead, create the layout on a Block Element.

After creating this “top bar” element within a Block element, we can hook in the created Block element on generate_after_logo hook. We then write a bit of custom CSS to align the created layout to your preference so the logo extends beside the topbar and the navbar. 😀

If you can provide us a mockup image of how you want things to be laid out, we’ll get a clearer idea of what to point you to. Let us know. 😀

[Omar]

Thank you Elvin for your response.

below a mockup image to show what i am planing to reach

you can see that the logo is extended to the top bar. Now, I am going to create the element as per your instruction and start adding the required blocks to it, and waiting to have your help customizing it.

Regards,

[Elvin]

That image you’ve shown is on LTR(left-to-right) page but your page is on RTL(right-to-left) layout mode.

Do you mean to change the layout to LTR as well?

you can see that the logo is extended to the top bar. Now, I am going to create the element as per your instruction and start adding the required blocks to it, and waiting to have your help customizing it.

Let me know when it’s implemented so we can inspect the site and apply the necessary CSS.

[Omar]

Hello Elvin,

I will not change the layout and I will keep it as it is. my site is using two languages so I don’t have to make any change in this manner.

I already created the top bar element and I added the required items into it.

[Elvin]

I already created the top bar element and I added the required items into it.

Can you try changing the hook used on the Block element to generate_inside_navigation?

Let us know when it’s implemented. Thanks.

[Omar]

Already changed

[Elvin]

Thanks.

Can you add these Hook elements as well –
https://share.getcloudapp.com/xQu7jgww
https://share.getcloudapp.com/mXurPq2d

Make sure they both have Display rule location of “Entire site”.

We’re adding these wrappers so the logo is isolated, making it have its own “column”.

After adding this, try adjusting the size of your logo on the customizer settings. It should take the space of 2 rows on proper sizing. 😀

[Omar]

Hello Elvin,

Actually, the links not arranged and I am not able to change the logo size.

Be noted to that I was using navigation as header and when i uncheck this option this is how the header looks:

[Elvin]

Be noted to that I was using navigation as header

Yes that’s considered. Keep that setting. 🙂

Ah right. I forgot to mention that you should change the priority of the block element inserted through generate_inside_navigation to “12”. so it goes inside the wrapper element we’ve added.

https://share.getcloudapp.com/DOuq6Qnb

Once the DOM structure is the suitable one, We then arrange things with CSS.

Here’s a sample CSS once you’ve achieved the desired structure.

.header-links-wrapper {
    display:flex;
    flex-wrap: wrap;
    flex: 1;
}

img.header-image.is-logo-image {
    height: auto;
    width: 190px;
}

.gb-grid-wrapper.gb-grid-wrapper-8c422108 {
    width: 100%;
    flex: 1 1 100%;
}

div#primary-menu {
    margin-right: auto;
}

.menu-bar-items {
    display: inline;
}

Here’s a demo result – https://share.getcloudapp.com/4gunPyyg

[Omar]

Thanks, Elvin.

Before I add the CSS the items shown on two rows with a small logo, and after I added the CSS the logo gets bigger but the items shown as the attached picture:

One more thing, when I scroll down the newly added items keep showing and don’t hide.

[Elvin]

Are you aiming for something like this – https://share.getcloudapp.com/jkuPmJ91 – for the sticky navigation?

If so, add this CSS:

#site-navigation .gb-grid-wrapper.gb-grid-wrapper-93c45ab7 {
    flex-basis: 50%;
    padding-right: 40px;
}

#sticky-navigation .gb-grid-wrapper.gb-grid-wrapper-93c45ab7 {
    display: none;
}

#sticky-navigation .gb-grid-wrapper.gb-grid-wrapper-93c45ab7 > .gb-grid-column .gb-inside-container {
    display: flex;
    align-items: center;
}

#site-navigation div#mega-menu-wrap-primary {
    flex-basis: auto;
}

#site-navigation .menu-bar-items {
    flex-basis: 20%;
}

#site-navigation .gb-inside-container {
    display: flex;
    align-content: flex-start;
    align-items: end;
}

[Omar]

Hi,

This is what I got

[Elvin]

Did you remove the previous CSS I’ve provided?

I don’t see this anymore:

.header-links-wrapper {
    display:flex;
    flex-wrap: wrap;
    flex: 1;
}

The CSS codes I’ve provided were meant to be added together. They complement each other to achieve the layout I’ve shown.

See this toggle demo – https://share.getcloudapp.com/rRujNn6G

You can see here that if I add all the CSS I’ve provided, it looks nice. But I remove all, it looks weird.

Here are all the CSS I’ve provided so far rolled into one:

.header-links-wrapper {
    display:flex;
    flex-wrap: wrap;
    flex: 1;
}

img.header-image.is-logo-image {
    height: auto;
    width: 190px;
}

.gb-grid-wrapper.gb-grid-wrapper-8c422108 {
    width: 100%;
    flex: 1 1 100%;
}

div#primary-menu {
    margin-right: auto;
}

.menu-bar-items {
    display: inline;
}

#site-navigation .gb-grid-wrapper.gb-grid-wrapper-93c45ab7 {
    flex-basis: 50%;
    padding-right: 40px;
}

#sticky-navigation .gb-grid-wrapper.gb-grid-wrapper-93c45ab7 {
    display: none;
}

#sticky-navigation .gb-grid-wrapper.gb-grid-wrapper-93c45ab7 > .gb-grid-column .gb-inside-container {
    display: flex;
    align-items: center;
}

#site-navigation div#mega-menu-wrap-primary {
    flex-basis: auto;
}

#site-navigation .menu-bar-items {
    flex-basis: 20%;
}

[Omar]

Hello Elvin,

Now, I tried to remove the search icon from the site navigation as I added it up as an element and I will keep it on the sticky navigation menu, I used some codes but it didn’t do the magic.
The elements at the upper line are not aligned well (Some up and some down).

please take note that on a large screen, all the items will be on one line and not two lines.

[Author]

Posts