[brydzyParticipant]

Hello!

On my site http://professionalmc.65interactive.com/ I have done a permanent hamburger menu for a little different look!

I am wondering how I can get it so it permanently stays on the right where it should be? I am also hoping I can put the words menu beside it so it directs the attention a bit!

I appreciate it.

[LelyModerator]

Hello There,

Thank you for posting in.
Unfortunately, Coming Soon is on. We need your admin credentials so we can view your site. Please provide it on a private reply so we can check.

[brydzyParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please add this in the CSS Customizer:

.x-navbar .x-btn-navbar {
    display: inline-block;
    float: right;
}

.x-navbar .x-btn-navbar:after {
    content: 'Menu';
}

Hope this helps.

[brydzyParticipant]

Thank you!!!

[Prasant RaiModerator]

You are most welcome. 🙂

[brydzyParticipant]

Hello again!

Hope everything is good. I have talked with some people and they don’t like the hamburger menu right away.

I am hoping that I can customize it so that it is the normal Nav bar when you come to the desktop & tablet site, and it only drops into hamburger menu once you start scrolling! It can be hamburger menu the whole time on mobile.

I am also hoping to put a black overlay on the drop-down menu so it is not transparent (although I want to keep the actual header bar transparent).

Can you help me with this? I appreciate it so much!

[Rue NelModerator]

Hello There,

Thanks for updating this thread!

To hide the hamburger menu and display the primary and then hide/show the elements upon scrolling, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css

#top .masthead .x-navbar .desktop{
  display: block !important;  
}

#top .masthead .x-navbar .x-btn-navbar {
    display: none !important;
}

#top .masthead .x-navbar.x-navbar-fixed-top .desktop{
  display: none !important;  
}

#top .masthead .x-navbar.x-navbar-fixed-top .x-btn-navbar {
    display: inline-block !important;
}

#top .masthead .x-navbar.x-navbar-fixed-top .x-nav-wrap.mobile.collapse.in {
    background-color: rgba(0,0,0,0.35) !important;
    padding: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.85);
}

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

[brydzyParticipant]

Works amazing guys! I am just hoping I can float the menu items over to the right before it drops into the hamburger. I notice they aren’t inline either and contact is dropping below. You can see that here: http://imgur.com/dBkJ8Et

I also am hoping it can drop to hamburger menu before it gets crowded and drops below. At smaller screen sizes it doesn’t fit! You can see what I mean here: http://imgur.com/3SVBePm

How would I do this?

[Rue NelModerator]

Hello There,

Please update the code we gave and use this instead:

@media(min-width: 1320px) {
  #top .masthead .x-navbar .desktop{
    display: block !important;  
  }

  #top .masthead .desktop .x-nav {
    float: left;
  }

  #top .masthead .x-navbar .x-btn-navbar {
    display: none !important;
  }

  #top .masthead .x-navbar.x-navbar-fixed-top .desktop{
    display: none !important;  
  }

  #top .masthead .x-navbar.x-navbar-fixed-top .x-btn-navbar {
    display: inline-block !important;
  }

  #top .masthead .x-navbar.x-navbar-fixed-top .x-nav-wrap.mobile.collapse.in {
    background-color: rgba(0,0,0,0.35) !important;
    padding: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.85);
  }
}

Please let us know if this works out for you. Thank you.

[brydzyParticipant]

Hey guys this is so great, it worked out perfectly!

The last thing I am hoping to do is put a semi-transparent black overlay over the background of the drop-down menu (I am hoping it can be set-up from 0-1. For example 0.5 opacity so I can adjust it to the right opacity!).

Would really appreciate it! Just doesn’t work sometimes with the transparent dropdown and white text!

[RadModerator]

Hi there,

Thanks for posting in!

You can try this one too,

.x-nav-wrap.mobile {
background: rgba(0,0,0,0.5) !important;
padding: 0 20px;
}

Cheers!

[brydzyParticipant]

Hey guys!

The semi-transparent background looks great! But, what I am hoping to do is make the semi-transparent fill the whole screen. Here is a screenshot: http://imgur.com/DTX52Kb

I would love to get those edges to the very sides of the screen no matter what screensize you are on (so full width/full height). Do you know how to do this?

Appreciate it so much!

[RupokMember]

Hi there,

Thanks for updating. You can update the code with this –

.x-navbar-inner .x-container.max {
  max-width: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important;
  padding: 0 10%;
}

Hope this helps.

Cheers!

[brydzyParticipant]

I tried that but didn’t get any changes! Any thoughts?

[Author]

Posts