Masthead buttons open up a modal?

2 posts in this topic

Hey guys - Has anyone ever tried to get the Pagelines Masthead buttons (or any section buttons for that matter) to open up a modal popup instead of link to a new page? I am trying to do that with my latest site and would love some help/guidance on how to accomplish this feat. I know Pagelines has a suite of tools including a shortcode for modal popups -- just don't know how/or if it is possible to make the Masthead link a modal popup instead. Looking forward to any help. 

Share this post

Link to post
Share on other sites

I've done this but it's a bit of a hack. Add # to the required url field and then the modal shortcode into the button text field.


This then gives you two buttons when you save/refresh. One being created by the masthead code, one by the modal link. Use css to hide the button created by the masthead leaving only the modal button active.


.masthead .btn-large {
    display: none;


End result -

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Problems when page loading on handheld devices
      By arcangel
      I hope someone can help I have built a landing page for my client using Pagelines DMS.
      At the bottom of the page there are some flags each opens a different modal with a 'RightSignature' contract within an Iframe.
      All works fine on a desktop, but for some reason when trying to go to the landing page on a handheld device it starts loading the page then all of a sudden it loads up a page displaying one of the contracts instead.
      Does anyone know what could be causing this? or think of a solution?
      Many thanks
    • Masthead styling CSS port to HTML
      By bjs198
      Hey there,
      I use quite a few templates to handle the look and feel of many many pages on a site and then populate the templated pages with a wp-content loop. However a client has asked that I effectively place a DMS2 Masthead at the top of each page as they prefer the styling of the title & tagline to the standard in WP. Obviously I can't do this when using templates as the Masthead would just replicate over all the associated templated pages, so could you please tell me if it's possible to recreate the title and tagline styling of the Masthead using HTML rather than CSS in the text view of the wp-content editor? I did inspect the HTML/CSS but came up fruitless...
      Hope that makes some kind of sense, and please excuse my coding ignorance :)
    • How to link a masthead button to a place in the same page?
      By knasen81
      Hi! I want to link a button in the musthead så that when clicked it send the visitor to a lower position/place in the same page. It is clear how you can type a link in a button så that the person sends to another page, but how do you send them to a lower place in the same page?
    • Big white space in modal
      By yemoonyah
      I created a modal with a registration form inside (using the Pagelines modal shortcodes).
      On top of the form and right before the submit button there are huge white spaces that I can't seem to get rid of. I tried using Chrome Developer tools but I just can't figure out what is going on and how to fix it.
      It's not an issue with the S2member registration form because outside the modal it works fine.
      (click on 'I'm in" button to open the modal)
      Pagelines, WP and all plugins are up to date
      Host: WP Engine
      Any suggestions?
    • Masthead Text Not resizing properly on mobile
      By MobileParity+
      My Masthead text is not formatting to mobile devices. It was working fine last week and once I added the ShareBar section everything got a little off. At first I thought it was the width of the ShareBar that was causing the issue so I used a media query to resize the width and it works for the tablet size of 767px however my Masthead text is now askew and does not resize for the screen. I am using FitText.js to resize the headings (h1, h2, etc). Here is the media query that I am using for the ShareBar. For some reason I am 
      @media only screen and (max-width:767px) {  #sharebarui2dj1f .pl-sharebar { width:540px;     } }  
      Framework Version:dms2
      WordPress Version:4+
      Plugins in Use:FitText.js