Mobile Responsiveness - Toggle

Discussion in 'HTML and CSS' started by Adelle, Jun 16, 2018.

  1. Adelle

    Adelle

    Joined:
    Jun 16, 2018
    Messages:
    1
    Likes Received:
    0
    Hi,
    I wonder if you can help me. I have designed a nav that should be responsive on a mobile platform. However when I inspect the element as mobile the toggle function does not work. Can anyone help? I was unable to upload the php file so I have placed the code below.

    <!DOCTYPE html>
    <html>
    <head>
    <title>N.E Design&Make</title>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/uikit/css/uikit.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="custom.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>

    <nav class="uk-navbar">
    <div class="uk-container uk-container-center">
    <a href="" class="uk-navbar-brand uk-hidden-small" >...</a>
    <ul class="uk-navbar-nav uk-hidden-small">
    <li class="uk-active"><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li class="uk-parent"><a href="">Gallery</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="">Contact</a></li>
    </ul>
    </ul>
    <div class="uk-navbar-flip uk-hidden-small">
    <ul class="fa-ul">
    <a href=""><i class="fa fa-facebook fa-2x"></i></a>
    <a href=""><i class="fa fa-twitter fa-2x"></i></a>
    <a href=""><i class="fa fa-instagram fa-2x"></i></a>
    </div>

    <a href="#offcanvas-nav" class="uk-navbar-toggle uk-visible-small data-uk-offcanvas"></a>
    <div class="uk-navbar-content uk-navbar-center uk-visible-small">...</div>
    </nav>

    <div id="offcanvas-nav" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
    <ul class="uk-nav uk-nav-offcanvas data-uk-nav>">
    <li class="uk-active"><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li class="uk-parent"><a href="">Gallery</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="">Contact</a></li>
    </ul>
    </div>
    </div>

    <div class="uk-block uk-block-secondary">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="/uikit/js/uikit.min.js"></script>
    </body>
    </html>
     
    Adelle, Jun 16, 2018
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.