Having trouble adding lightbox feature to responsive menu item

[kineticcreative123]

Hi Everyone,

I'm having trouble figuring out how to add a lightbox feature to a mobile menu. I have the lightbox built and working on its own but can't figure how to incorporate it into my responsive menu without breaking everything. I'm not looking for anything fancy. Just a lightbox feature that can open a url.

This is my menu:

untitled document

This is my lightbox:

http://offers.premierinc.com/header_lightbox.html

[kineticcreative123]

Perfecto! Thanks osgood! I've seen that before in my travels and now I know what it means. Think the header looks and works awesome.

Thanks again you genius!

[kineticcreative123]

Hey osgood,

Think I ruined something. My X to close the lightbox is missing or behind the header. Not sure how or what i did.

untitled document

It's showing up in my original lightbox

http://offers.premierinc.com/header_lightbox.html​

[Edited by Mod]

[osgood_]

kineticcreative123  wrote

Hey osgood,

Think I ruined something. My X to close the lightbox is missing or behind the header. Not sure how or what i did.

untitled document

It's showing up in my original lightbox

http://offers.premierinc.com/header_lightbox.html

[Edited by Mod]

Add z-index: 3000; to the css selector 'page-overlay' (shown in red):

#page-overlay{

position: fixed;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.8);

z-index: 3000;

}

[kineticcreative123]

Thank you!!

[kineticcreative123]

Hey again,

I just noticed that the 'hambuger' menu stopping workin throughout the editing. Would you have an idea of what happened?

Here is a link to the same one with the hamburger menu that works. Ya, the form looks like junk because someone got in there and messed it up. just saying:)

capital analyitics

[osgood_]

kineticcreative123  wrote

Hey again,

I just noticed that the 'hambuger' menu stopping workin throughout the editing. Would you have an idea of what happened?

Here is a link to the same one with the hamburger menu that works. Ya, the form looks like junk because someone got in there and messed it up. just saying:)

capital analyitics

Well there is a difference between the navigation on the page that has the 'hamburger' and the one that doesn't have the hamburger.

The first one below has the id="js-navbar-menu" which we removed, plus it has the Features and Results links which form the hamburge...

<nav role="navigation" class="okayNav pull-right" id="js-navbar-menu">

   <ul id="navbar-nav" class="navbar-nav">

   <li><a style="color: #ffc627;" class="btn-nav active" href="#demo">Watch Video</a></li>

   <li><a class="btn-nav" href="#pluses">Features</a></li>

   <li><a class="btn-nav" href="#results">Results</a></li>

   <li><a style="margin-top:5px;padding:7px 15px 7px 15px;background-color:#transparent;border: 2px solid #e7e7e7;bor..." class="btn-nav" href="#">Free Trial</a></li>

   </ul>

</nav>

On your new page neither id="js-navbar-menu' or the Features/Results links exist:

<nav role="navigation" class="okayNav pull-right">

   <ul id="navbar-nav" class="navbar-nav">

<li> <a style="color: #ffc627;" class="btn-nav">877.777.1552</a></li>

   <li><a style="color: #ffc627;margin-right:10px;" class="btn-nav" href="https:www.learn.premierinc.com/cost-management">Learn More</a></li>

  
   <li><a style="margin-top:5px;padding:7px 15px 7px 15px;background-color:#transparent;border: 2px solid #e7e7e7;bor..." class="btn-nav open-lightbox" href="#">MENU</a></li>

   </ul>

  
   </nav>

It could be that id="js-navbar-menu' is responsible for making the hamburger work, in which case the Learn More link will probably stop working if you include it.

It seems to me that no external link that you include within the navigation will go anywhere so long as the id="js-navbar-menu'  is present. I dont know where you came by this js nav plugin but you need to go back and ask why that is and how to fix it.

[osgood_]

The other alternative you have for making the 'Learn More ' link function correctly is using a bit of javascript:

<li><a style="color: #ffc627;margin-right:10px;" class="btn-nav" href="#" onclick="goToUrl(); return false;">Learn More</a></li>

<script>

function goToUrl() {

location.href = 'https://www.google.co.uk/';

}

</script>

[kineticcreative123]

Your gonna kill me man. I can't believe I missed it. The url was missing the //         http:www.

Dang! Sorry for all this.

untitled document

But now the hamburger is out of commission again. !!!!!

Nevermind the js_menu script is missing. Won't bother you anymore. Getting on a bootstrap forum.

[osgood_]

You need to slow down a bit, back up and think things through - everything you require to make your page function as you want is in the previous couple of posts - I'll go through it again.

The hamburger is out of commision because id="js-navbar-menu" was removed from the line of code below, as that was affecting the 'Learn More' link, stopping it from going to url specified in the link. So put it back as below shows.

<nav role="navigation" class="okayNav pull-right" id="js-navbar-menu">

Then amend your 'Learn More' link to exactly as below, with the onclick event hander/goToUrl function added:

<li><a style="color: #ffc627;margin-right:10px;" class="btn-nav" onclick="goToUrl(); return false;" >Learn More</a></li>

Then add the below <script> at the foot of your page just before the <script> that opens the lightbox. (replace the web address with the url you require)

<script>

function goToUrl() {

location.href = 'https://www.google.co.uk/';

}

</script>

If you follow the steps CAREFULLY above your problems should be solved....

[kineticcreative123]

Thanks osgood! Yes I'm stressed and rushing. Thank you that worked. One thing though. How can I add links to other urls or multiple links in the menu? Since there is only one onclick script.

[osgood_]

kineticcreative123  wrote

Thanks osgood! Yes I'm stressed and rushing. Thank you that worked. One thing though. How can I add links to other urls or multiple links in the menu? Since there is only one onclick script.

Add additional onclick functions, there can't be many if its a navigation menu. Im still not sure why the js that controls the hamburger stops the links from working unless they scroll to a section in the same page or open a lightbox etc, othewise it would not be an issue

[kineticcreative123]

OK. so just to clarify. I can't add multiple onclick's for each link right? Maybe I need to find another responsive menu and use your lightbox code.

[osgood_]

Yes, its not ideal but will get the job done. Ideally the responsive navigation should not interfer with the ability to include a clickable  link to another page...........thats the problem you face when trying to jigsaw something together with bits of code written by someone else, their idea of what should happen and yours might not necessarily be the same.

The navigation you have at the moment looks like it has been written specifically for a one page website where you can click a link and it will scroll to a section in that page. I dont know if there is an option to make a link clickable which will take you away from the page, as l havent written the script.

[kineticcreative123]

Fixed. I started from scratch.  After searching for the original "okaynav" code I was able to replicate and use your lightbox code. That pesky js-navbar-menu was no where to be found. Now if i can make the MENU button yellow when viewed in the hamburger. 

Good learning experience though.

untitled document

[osgood_]

Remove all the inline css styles from the link and add a class 'menu' to the <li> tag as shown below:

<li class="menu"><a  class="btn-nav open-lightbox" href="#">MENU</a></li>

Then add the css selectors below to your list of other css syles, at the end of the list.

#nav-main .menu a  {

margin-top:5px;

padding:9px 20px 9px 20px;

background-color:#transparent;

border: 2px solid #fff;

border-radius: 7px;

font-size: 17px;

}

@media (max-width: 880px){

#nav-main .menu a {

color: #ffc627;

border: 2px solid #ffc627!important;

width: 150px;

}

}

[kineticcreative123]

Awesome. Thank you that worked (of course). I was trying the same thing but goofed up on the media query.

Have a good one.

[osgood_]

kineticcreative123  wrote

Do you have any suggestion on how to get that dang link in the header to go to a page in the site (learn more).

Can yo put back up the page where you are with this to-date, the previous links you supplied seem to go somewhere else now.

[osgood_]

kineticcreative123  wrote

How would I be able to get "learn more" to open a url in the parent window not the lightbox?

Now I read it again you want the page to appear in a parent window??

Then use target="_blank":

<a href="myPage.html" target="_blank">Learn More</a>