A menu item kept outside the collaped menu button

[andyjoe81]

I’m stunned this isn’t an existent wordpress plugin already. Calls to action are so important on most sites that sell services or products. The button I want everyone to click should be in the main menu of my site with Different css styling to draw attention to it. But on mobile devices the menu collapses and suddenly the main destination I want everyone to end up clicking is hidden. I want to override this collapse for this menu item only. I want the three horizontal lines button people have to click to see the menu to be accompanied by the call to action button along side it, and I want these two items and maybe my logo to stay fixed to the top of the screen even on mobile devices as the visitor scrolls. Any ideas how to accomplish all this?

[Atelierbram]

Can you provide a link to this example, or recreate the menu in a demo?

[andyjoe81]

I can’t create a demo, but here’s some visual mockups:

Desktop mockup: http://postimg.org/image/yhos4d2cr/
Mobile mockup: http://postimg.org/image/ss8jk1w6j/

[Atelierbram]

The button I want everyone to click should be in the main menu of my site with Different css styling to draw attention to it.

1. In the HTML, move the button to just outside the nav for the menu
2. target this in the CSS using any layout module, like flexbox

<div class="wrapper-menu">
  <nav class="nav">
    <ul class="nav_list">
      <li><a href="#!">menu-item</a></li>
      <li><a href="#!">menu-item</a></li>
      <li><a href="#!">menu-item</a></li>
    </ul>
  </nav>
  <a href="#!" class="btn btn-cta">View Trial Lesson Times</a>
</div> 

[Author]

Posts