Custom Header

Support
#1

Hi there,

Is there any way I can make my header section like this:

Also, how can I make the fixed navbar bottom border appear when scrolling down and, dissapear when the page the scrolled up to the top.

Thanks,

#2

Hi Rearolam,

Hope you’re well today.

Yes, this is possible but this would involve some custom development since you are using X. This requires override the header template through the child theme but this would be outside the scope of support we can offer.

However, to get you started, you will have to override the file _navbar.php that you can find in x/framework/legacy/cranium/headers/views/global. You will have to edit the file content so that it will reflect the header layout you want.

Please check this link to check more about customizations:

If you are unsure how to proceed, you may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

You should be able to get rid of the border by adding this CSS code in X > Theme Options > CSS:

.x-navbar.x-navbar-fixed-top {
    border-bottom: 0;
}

Hope this helps.

#3

Hi Jade,

Thanks for the reply.

  1. How can I remove the left padding of the first menu item? (see image below)

  2. How can I make “about” and “contact” left floating?

Thanks,

#4

Hi @Tsogtbaatar,

Please try this CSS code in X > Theme Options > CSS:

.x-navbar .desktop .x-nav>li:first-child a {
    padding-left: 0;
}

.masthead-inline .desktop .x-nav {
    width: 100%;
}

.x-navbar .desktop .x-nav>li#menu-item-526,
.x-navbar .desktop .x-nav>li#menu-item-527 {
    float: right;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

#5

Hi Jade,

Thanks for this.

Can I remove the padding of the specific the item? Because it messes up with the submenu (see screenshot).

How can I align the submenu drop down? (See the red line)

I also want to delete the right padding of the last item in the menu.

#6

Hi @Tsogtbaatar,

Please find this custom CSS:

.x-navbar .desktop .x-nav>li:first-child a {
    padding-left: 0;
}

And change to this:

.x-navbar .desktop .x-nav>li:first-child > a {
    padding-left: 0;
}

Please add this custom CSS:

.masthead-inline .x-navbar .desktop .sub-menu {
    left: 0;
    right: auto;
}

To remove the padding of the contact menu item, please use this CSS:

.x-navbar .desktop .x-nav>li#menu-item-526 > a {
    padding-right: 0;
}

Hope it helps :slight_smile:

#7

Hi Thai,

Fantastic, thanks for that.

Cheers,

#8

You’re most welcome, @Tsogtbaatar.

#9

This code makes the menu overlaps submenu.

#10

Hi There @Tsogtbaatar

Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    top: auto;
    right: auto;
}

Thanks!

#11

No, it doesn’t seem to work.

#12

Hi @Tsogtbaatar,

You can try this code instead

body .masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
       left: 100%;
       right: auto;
       top: 0;
}

Hope that helps

#13

Great, it worked. Thanks for that.

#14

You’re welcome! :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.