Docs

[I witness]

Hi there,

I have a couple of nav bar issues I’d like to resolve. I have a one page menu inserted in my navbar that I would like to be more responsive. Now it seems the breakerpoint is around 980px & then it completely vanishes. I was hoping that the X-theme would provide a hamburger menu after a breakerpoint (maybe there is but I couldn’t find it). Then around 600px I get the hamburger menu that I put in with a plugin (Responsive Menu)(again if the theme provides a hamburger menu, I would rather not use a plugin of course).

So in short what I would like:
A menu that doesn’t dissapears. Preferbably around 700px a breakerpoint that slides in to a hamburger menu with a subtle slide out menu (unlike the plugin, it’s huge). Since the menu items are fairly large, I am also open for the menu items to be/slide on 2 lines e.g.

”ik wil een gastspreker”

”ik wil
een gastspreker”

Hope this makes sense and you can help me 🙂

http://www.iwitnessindeschool.nl/
WordPress 4.7.2
X theme 4.6.4
Cornerstone 1.3.3

Thanks you in advance!

Annemarie

[Jade]

Hi Annemarie,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[I witness]

This reply has been marked as private.

[Rad]

This reply has been marked as private.

[I witness]

Hi Rad,

Thank you for your reply! I deactivated the third party plugin, it was merely there as an ”emergency” solution to my problem, actually don’t want the plugin if I don’t have to.

Ok so the problem is, if you take a look at the site now, you’ll see, when scaling it down, that the menu disappears around 980 px after that there’s nothing, not a hamburger menu or anything.

1. I would like the breakerpoint to be smaller, say around tablet size . But since my menu is fairly large that may cause a problem & get ugly, so a breakerponit until the point it’s still pretty to look at.

2. When the new breakerpoint hits, I would like a mobile hamburger menu. I wasn’t able to find this in settings, so as a quick solution I installed the third party plugin.

3. Extra: I would love to have a 1px shade on the bottom

If I would have to give an example of a site that is similar to my wishes, its this: http://www.galacticmikey.com/ of course, with a white background, black menu items, red on rollover or activated.

Hope you can help! Thanks in advance!

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
body .masthead-inline .x-btn-navbar {
    color: #000;
    margin-top: 30px;
    padding: 0.458em 0.625em;
    box-shadow: inset 0 0 0 transparent, 0 1px 4px #000;
    border-radius: 4px;
}

body .masthead-inline .x-btn-navbar:hover {
    color: red;
}
}

Hope that helps.

[I witness]

Hi Paul R,

That worked! So nice, exactly what I meant! Thank you!

2 more things, if it not too much trouble. When the hamburger menu drops down it now had a transparancy what makes it hard to read. Is there a way to maybe make it solid white or less transparent? The other thing is since I have a one page site is it possible to make the hamburger menu icon fixed while scrolling? Love to hear!

Again thanks!

[Rad]

Hi there,

It’s because of this existing CSS

.x-navbar {
    background-color: #ffffff;
    height: 120px;
}

Please change it to this

.x-navbar {
    background-color: #ffffff;
}
@media ( min-width: 980px ) {
.x-navbar {
    height: 120px;
}
}

Thanks!

[I witness]

Thank you Rad! That sure did the trick splendid! The excisting css was my bad, I had no idea.

Ehm can you please help me with my other question?

The other thing is, since I have a one page site is it possible to make only the hamburger menu icon fixed on top right while scrolling in the mobile modus? Love to hear!

That’s the only thing I have left with my header issue.

Again thanks a bunch!

Best Regards,

Annemarie

[Paul R]

Hi Annemarie,

To make it fix you can add this in Cornerstone > Settings > Custom CSS

.x-btn-navbar.collapsed {
    z-index: 99999;
    position: fixed;
    right: 30px;
}

.x-nav-wrap.mobile {
    position: fixed;
    width: auto;
    padding: 0px 20px;
    right: 30px;
    top: 100px;
    background: rgba(255, 255, 255, 0.8);
}

https://www.screencast.com/t/UIPW7GRa

Hope that helps

[I witness]

Hi there, thank you again for assisting me! It almost worked! The icon itself is scrolling down and looking good see screenshot 1, but when I click on it the menu that appears, is there to stay, even when selecting a menu item (see screenshot 2)! And the hamburger icon itself is gone and not reappearing. Also the appearing menu is transparant again, what makes it hard to read. Also a thing we kinda solved before in this thread. Thanks again for all the help and so sorry for the inconvience!

Best regards,

Annemarie

[Rue Nel]

Hello There,

Thanks for sending us the screenshots. To resolve this issue, please add the following JS code in the customizer, Appearance > Customize > Custom > Edit Global Javascript

(function($){
  $('.x-navbar .x-nav-wrap.mobile a').on('click touchstart',function(){
    $('.x-btn-navbar').trigger('click');
  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[I witness]

Hi Rue,

That sure did the trick, the button reapears yeeh (screenshot 1)! Really final, final, final thing, if it’s not too much trouble.

1. Is there a way to make the appearing menu’s grey transparent fields to be white? See screenshot 2

2. Is there a way to make the hamburger icon to stay fixed all the time? See screenshot 2

Again thank you so much for all the assistance, it had been a great help and great service you guys provide!

Love to hear!

Annemarie

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar .mobile .x-nav li>a {

    background-color: rgba(255,255,255,1);
}
@media (max-width: 979px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}
}

Hope that helps.

[I witness]

Hi Christopher,

Thank your for the code! The background color worked perfectly! I even changed it to a different color myself 😉

As for the fixed hamburger button, this code makes the whole navbar fixed, I only wanted the icon. So I left it the way it was.

Thank you for all the help!!

[Author]

Posts