Redirect from subdomain to main domain navbar dropdown

Question

I've found a similar solution here Redirect to a div on a different page with smooth scrolling? but have tried to apply to my project and doesn't work.

So to recap - I'm using Bootstrap Navbar and ScrollTop smooth scroll and works fine on main page. (eg - example.com, example.com/#dropdown1 ). Problem is when I go to subdomain (eg - example.com/user) and then click on the dropdown navbar menu option, it simply applies the '#dropdown1' to the end of the subdomain (eg - example.com/user/#dropdown1) and does not redirect.

I can change the href to /#dropdown1 but then the smooth scroll no longer works. It just jumps to the div regardless if on main or subdomain. Relevant code below - please help.

I read somewhere to try data-targets, hence why it's here but this didn't work.

Application.html.erb

...
<div class="collapse navbar-collapse" id="bb-nav">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sellers <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#home" data-target="home">Home</a></li>
            <li><a href="#dd1" data-target="dd1">dd1</a></li>
            <li><a href="#dd2" data-target="dd2">dd2</a></li>
            <li><a href="#dd3" data-target="dd3">dd3/a></li>

          </ul>
        </li><!--/.dropdown-->
</ul>
</div> 
...       
<script type="text/javascript">
          var $root = $('html, body');
            $('.navbar-nav a').click(function() {
                var href = $.attr(this, 'href');
                $root.animate({
                    scrollTop: $(href).offset().top
                }, 500, function () {
                    window.location.hash = href;
                });
                return false;
            });
        </script>

score 0 · Accepted Answer · edited May 23 '17 at 11:45

This post helped me get the answer. Rails 4 / Bootstrap 3: how to display a different navigation bar on different pages?

I created a partial that had an alternate navbar for the subdomain pages and then executed this:

Layout/Application:

<body>
    <% if content_for?(:navbar) %>
        <%= yield(:navbar) %>
    <% else %>
       # code for default navbar
    <% end %>
</body>

Then in all of my subdomain pages views I did:

View:

 <% content_for :navbar do %>
      <%= render '_navbar_partial_name' %>
 <% end %>

The alternate navbar I just made a button that led to the home page and when landed on the homepage it automatically converted the button to the regular scrolling dropdown menu.

Redirect from subdomain to main domain navbar dropdown

1 Answers1