Docs

[Teeebest]

Hi, I have the hamburger menu activated on desktop and mobile but i have few challenges.
1. I want the word ‘Menu’ to appear before the hamburger icon both on the desktop and mobile.
2. I want to shift the icon to the right on the desktop and for the menu to slide out to the left when clicked and not downward.
3. I want the icon to be centered on mobile.
The url is http://www.goodlifeafrica.org

Thanks as always.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

#1. I can’t see the text ‘Menu’ as you can see the screenshot – http://prntscr.com/b1puob

However you can try this CSS under Customize > Custom > CSS to make sure it won’t show :

.x-btn-navbar .visually-hidden {
  display: none!important;
}

#2. We could assist you to shift the icon to right but can’t change the direction of opening as it would be out of our support scope. Let’s add this :

@media only screen and (min-width: 980px) {
.masthead-inline .x-btn-navbar {
  margin-right: -60px;
}
}

#3. You could use this :

@media only screen and (max-width: 979px) {}
.masthead-inline .x-btn-navbar {
  float: none!important;
}
}

Hope this helps.

Cheers!

[Teeebest]

Thanks for the prompt response.
Case 1 not resolved as you did not possibly get what i am saying. Case 2 resolved without using the css you sent, Case 3 resolved with what you sent.

Back to case 1 please, you will be familiar with this css:
.x-btn-navbar i:before {
content: “MENU”;
font-family: “Helvetica”;
font-weight: 800;
}

This changes the hamburger icon to MENU which is not what i want. What I want to achieve is to have the word ‘MENU’ before the hamburger icon and not to totally change the icon.

Case 1(b): please i want my fixed right nav bar to be transparent but when clicked, the background will appear with the menu item as it is here:http://invisiblechildren.com/

Thanks as always.

[Rue Nel]

Hello There,

Thanks for the updates.

#1] To have the word ‘Menu’ to appear before the hamburger icon, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead-inline .x-btn-navbar:before {
    content: "Menu";
    margin-right: 15px;
}

#1b] To add a background color for your right navbar, you can make use of this code:

.x-navbar.x-navbar-fixed-right {
    padding: 10px;
    background-color: #000 !important;
}

Copying the same menu effect from your example url may not be possible. Regretfully we cannot support any modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[Author]

Posts