Floating navbutton RRS feed

  • Question

  • User-590375999 posted

    I need to show the navbutton left and middle of the screen, when user clicks that button it should shows sub menus. This navbutton should be hidden when the window is mobile size.<br>
    Like below

    Friday, March 30, 2018 1:18 PM

All replies

  • User-832373396 posted

    Hi sivappooja,

    Sir, this is the main popular design.

    Navigation Bars

    A navigation bar is a navigation header that is placed at the top of the page:

    <nav class="navbar navbar-default testnav"> </nav>

    With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

    A standard navigation bar is created with <nav class="navbar navbar-default">.

    The following example shows how to add a navigation bar to the top of the page:

    <!DOCTYPE html>
    <html lang="en">
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WebSiteName</a>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
    <div class="container">
      <h3>Basic Navbar Example</h3>
      <p>A navigation bar is a navigation header that is placed at the top of the page.</p>


    With regards, Angelina Jolie

    Monday, April 2, 2018 2:51 AM