Slim not routing in mobile view

1

Good day. I am in the process of building a website using slim framework 3. Everything works well except for when i am in mobile view the navigation is not working, for example if i click the about page while in mobile view it does not route to about page, but in full web view the navigation works great when i click on about it goes to the page. I am also using the twig template and materializecss. By the way this is my first time using slim.

Herewith some code from my project

//main.twig

<nav role="navigation">
    <div class="nav-wrapper container">
        <a id="logo-container" href="" class="brand-logo">
            <img style="width: 120px;" src="static/images/cycle-way.%20logo.png"/>
        </a>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
          <li><a href="{{ path_for('/') }}">Home</a></li>
          <li><a href="{{ path_for('/about') }}">About</a></li>
          <li><a href="{{ path_for('/services') }}">Services</a></li>
          <li><a href="#">Shop</a></li>
          <li><a href="#">Blog</a></li>
      </ul>

      <ul class="side-nav" id="nav-mobile">
          <li><a href="{{ path_for('/') }}">Home</a></li>
          <li><a href="{{ path_for('/about') }}">About</a></li>
          <li><a href="{{ path_for('/services') }}">Services</a></li>
          <li><a href="#">Shop</a></li>
          <li><a href="#">Blog</a></li>
      </ul>
    </div>
  </nav>

//index.php

//index page
$app->get('/', function ($request, $response, $args) {
  return $this->view->render($response, 'home.twig');
})->setName('/');

// about page
$app->get('/about', function (Request $request, Response $response) {
  return $this->view->render($response, 'about.twig');
})->setName('/about');

// about page
$app->get('/services', function (Request $request, Response $response) {
  return $this->view->render($response, 'services.twig');
})->setName('/services');


// Run app
$app->run();
2

Hey @JCR27,

The code you have posted looks fine. A problem like this would more typically be an issue in your HTML/CSS than it would be with the app. If you inspect the HTML with fro your mobile browser, what does the link to the About page look like?

Second, while I don’t think this has anything to do with your issue, I’d consider changing how you are naming your routes so that you don’t confuse the route name with the actual path/URI. I’d name them like 'home', 'about', ’ and 'services' instead of including the initial slash. Then in Twig you would use {{ path_for('about') }}. Again, what you are doing is fine, it just reads more like a name.

Going back to the issue, Perhaps you can post the output of your HTML to JSFiddle so we can have a look and see if the issue is there?

3

Hi @tflight

Thank you for your response.

Ok sure let me have a look at the html again, because i had tried testing the same theme (without any php, slim or twig code) in mobile view using just plain html and css. The about file was a .html file and i used (

  • About
    • ) to route and it worked nicely. So the plain html/css theme works nice in mobile, it is only when i add slim and twig code that now in mobile view the routing fails to work. But let me test again and maybe post the output to js fiddle.
    4

    @tflight turns out you where right.

    Thank you very much for your help. Indeed it was an html/css issue turns out in Materialize css If you set your navbar to fixed then it affects the mobile navbar when in mobile view, it stops responding. So the solution is you either remove the (position: fixed;) or you completely remove you mobile navbar html code and put it in it’s own div outside of the nav div.

    Thank you for your help once again, I am once again a happy Slim Framework Newbie :slight_smile:

    1 Like
    5

    Glad you got it figured out!