[inalienablearmsParticipant]

Hey Joao,
Thanks for that! Those most recent code snippets were fantastic, and I was able to tweak them a bit more to drive even more functionality.

To circle back on the last remaining item on this header, my previous number 2. What I’d like to do is be able to control the left/right placement of the Login, Cart, phone number as well as the social buttons. So that they aren’t in the left and right corner of the header.

I’m not sure how to target them via CSS, to be able to manipulate their position within the x-topbar. Ideally, I’d like to have them move with the viewport, similar to how the x-brand logo does now with the most current CSS.

Lastly.
1. See 1.png & 2.png – is there a way to reduce the gap you can see through the header, between the top of the page and the slider? I believe it might be this code (.x-slider-container.below {margin-top: -150px;}) that just needs to be tweaked for the viewport ranges, but not completely sure what that CSS would look like. This is much more visible when you expand the hamburger menu and you can see the slider is pushed 2/3’s of the way down the screen.

2. See 2.png – When you click on the Down Arrows on the submenu from the hamburger menu, it links you straight to the category page, it does not expand the menu item to a sub-sub menu. Is this a setting that I’m missing in customizer?

Thanks!

[FriechModerator]

Hi There,

You can use this selector to target the topbar content and social icons.

topbar content:

.x-topbar .p-info {
	/*CSS property HERE*/
}

social links container:

.x-topbar .x-social-global {
	/*CSS property HERE*/
}

social links icon:

.x-topbar .x-social-global a {
 /*CSS property HERE*/
}

The first thing you want to do is to add float: none; property on both element, to prevent them from floating left and right respectively.

If you want them inline you can add display: inline-block; property.

Use this to style the entire topbar. You can use text-align: $$$; if you want all the topbar element to be center or left or right.

.x-topbar {
      /*CSS property HERE*/
}

#1 You can utilise the CSS @media query to set a negative margin on various screen sizes:

/*Medium*/
@media (max-width:  979px) {

}

/*Small*/
@media (max-width:  767px) {

}

/*Extra Small*/
@media (max-width:  480px) {

}

#2 Sorry I can’t replicate that issue on my end. The menu expand when I click the drop down arrow. Would you mind letting us know on what device this issue is occurring?

Thanks.

[inalienablearmsParticipant]

Friech,

you nailed it with the code snippets again! Thanks a ton. I have only been able to find two small details left I need to iron out on the header.

Between roughly 1140px & 978px, you’ll notice that the menu overlaps the x-brand item. I’m not sure which solution would be best, perhaps triggering the hamburger menu sooner OR hiding the logo object for that range of pixels? What object/CSS would call for that? see screenshot

lastly is a style question for the hamburger menu. The submenu’s have a black background right now, I couldnt find the element to call for to have it match the same transparent background as the top level menu items. see screenshot.

also, is there a way to have the hamburger menu scroll/float with the site scroll bar? Only in a particular viewport range like max-width 480px?

Thanks again!

[RadModerator]

Hi there,

It’s too big to display mobile menu early, there will be big space on your header. I think changing the font size is better, or stack the logo on top of the menu.

About the background, please add this as well

.x-navbar .sub-menu {
    background: transparent;
}

Hope this helps.

[inalienablearmsParticipant]

Perfect. That got me where I need to be.

The last thing I cannot identify, is how to have the “hamburger” style menu “float” or “autoscroll” with the webpage itself. Specifically on mobile devices.

I know that we are calling for it to be positioned in a certain place which appears over the header, but is there a way on viewports 480 and smaller, to have it start in the current position but scroll with the homepage as well?

Thanks.

[Rue NelModerator]

Hello There,

Thanks for the updates. To have the hamburger menu stay fixed and display in place even when you scroll the page, please add the following custom css at the end of your other css.

a.x-btn-navbar.collapsed {}

@media(max-width: 979px){
    .x-btn-navbar {
        position: fixed;
        margin-top: 0 !important;
        top: 20px;
        right: 5px;
        background-color: rgba(0,0,0,1) !important;
    }
}

hope this helps.

[Author]

Posts