How to create navigation bar with Login | Sign Up button in bootstrap 4?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I want to create a navigation bar with Login | Sign Up button in bootstrap 4. kindly check the image what I am looking for exactly:

Desktop Version

Mobile Version

Kindly Check my code what I am doing:

navigation.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <a class="navbar-brand" href="#">WebSiteName</a>

      </div>

      <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>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </nav>

Using the exactly above code I am getting below output:
enter image description here

Kindly suggest what I am doing wrong. Any idea or suggestion would be welcome.

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

asked Nov 16 '18 at 14:02

Sarah

1587

You're using Bootstrap 3 markup for Bootstrap 4. Read the docs for the correct Bootstrap 4 Navbar structure.

– Zim
Nov 16 '18 at 14:03

Is this answer useful to you?

– Razvan Zamfir
Nov 16 '18 at 16:40

add a comment |

I want to create a navigation bar with Login | Sign Up button in bootstrap 4. kindly check the image what I am looking for exactly:

Desktop Version

Mobile Version

Kindly Check my code what I am doing:

navigation.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <a class="navbar-brand" href="#">WebSiteName</a>

      </div>

      <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>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </nav>

Using the exactly above code I am getting below output:
enter image description here

Kindly suggest what I am doing wrong. Any idea or suggestion would be welcome.

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

asked Nov 16 '18 at 14:02

Sarah

1587

You're using Bootstrap 3 markup for Bootstrap 4. Read the docs for the correct Bootstrap 4 Navbar structure.

– Zim
Nov 16 '18 at 14:03

Is this answer useful to you?

– Razvan Zamfir
Nov 16 '18 at 16:40

add a comment |

I want to create a navigation bar with Login | Sign Up button in bootstrap 4. kindly check the image what I am looking for exactly:

Desktop Version

Mobile Version

Kindly Check my code what I am doing:

navigation.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <a class="navbar-brand" href="#">WebSiteName</a>

      </div>

      <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>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </nav>

Using the exactly above code I am getting below output:
enter image description here

Kindly suggest what I am doing wrong. Any idea or suggestion would be welcome.

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

asked Nov 16 '18 at 14:02

Sarah

1587

I want to create a navigation bar with Login | Sign Up button in bootstrap 4. kindly check the image what I am looking for exactly:

Desktop Version

Mobile Version

Kindly Check my code what I am doing:

navigation.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <a class="navbar-brand" href="#">WebSiteName</a>

      </div>

      <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>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </nav>

Using the exactly above code I am getting below output:
enter image description here

Kindly suggest what I am doing wrong. Any idea or suggestion would be welcome.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <a class="navbar-brand" href="#">WebSiteName</a>

      </div>

      <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>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



  <nav class="navbar navbar-inverse">

    <div class="container-fluid">

      <div class="navbar-header">

        <a class="navbar-brand" href="#">WebSiteName</a>

      </div>

      <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>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </nav>

html css css3 navigation bootstrap-4

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

asked Nov 16 '18 at 14:02

Sarah

1587

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

asked Nov 16 '18 at 14:02

Sarah

1587

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

edited Nov 16 '18 at 16:16

Razvan Zamfir

1,10411360

asked Nov 16 '18 at 14:02

Sarah

1587

asked Nov 16 '18 at 14:02

Sarah

1587

asked Nov 16 '18 at 14:02

Sarah

1587

You're using Bootstrap 3 markup for Bootstrap 4. Read the docs for the correct Bootstrap 4 Navbar structure.

– Zim
Nov 16 '18 at 14:03

Is this answer useful to you?

– Razvan Zamfir
Nov 16 '18 at 16:40

add a comment |

You're using Bootstrap 3 markup for Bootstrap 4. Read the docs for the correct Bootstrap 4 Navbar structure.

– Zim
Nov 16 '18 at 14:03

Is this answer useful to you?

– Razvan Zamfir
Nov 16 '18 at 16:40

You're using Bootstrap 3 markup for Bootstrap 4. Read the docs for the correct Bootstrap 4 Navbar structure.

– Zim
Nov 16 '18 at 14:03

Is this answer useful to you?

– Razvan Zamfir
Nov 16 '18 at 16:40

add a comment |

2 Answers
2

active

oldest

votes

There are no glyphicons in BS 4, you have to use Font Awesome. Since BS 4 has flexbox included, you align elements with ml-auto (align-right) and mr-auto (align-left).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

  <a class="navbar-brand" href="#">WebSiteName</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div id="navb" class="navbar-collapse collapse hide">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 1</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 2</a>

      </li>

    </ul>



    <ul class="nav navbar-nav ml-auto">

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

      </li>

    </ul>

  </div>

</nav>

edited Nov 16 '18 at 16:39

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

add a comment |

Try something like this (see it in full page):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <a class="navbar-brand" href="#">WebSiteName</a>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">First Page</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled Page</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

answered Nov 16 '18 at 14:26

Serge

3,29734292

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53339351%2fhow-to-create-navigation-bar-with-login-sign-up-button-in-bootstrap-4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

There are no glyphicons in BS 4, you have to use Font Awesome. Since BS 4 has flexbox included, you align elements with ml-auto (align-right) and mr-auto (align-left).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

  <a class="navbar-brand" href="#">WebSiteName</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div id="navb" class="navbar-collapse collapse hide">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 1</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 2</a>

      </li>

    </ul>



    <ul class="nav navbar-nav ml-auto">

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

      </li>

    </ul>

  </div>

</nav>

edited Nov 16 '18 at 16:39

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

add a comment |

There are no glyphicons in BS 4, you have to use Font Awesome. Since BS 4 has flexbox included, you align elements with ml-auto (align-right) and mr-auto (align-left).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

  <a class="navbar-brand" href="#">WebSiteName</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div id="navb" class="navbar-collapse collapse hide">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 1</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 2</a>

      </li>

    </ul>



    <ul class="nav navbar-nav ml-auto">

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

      </li>

    </ul>

  </div>

</nav>

edited Nov 16 '18 at 16:39

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

add a comment |

There are no glyphicons in BS 4, you have to use Font Awesome. Since BS 4 has flexbox included, you align elements with ml-auto (align-right) and mr-auto (align-left).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

  <a class="navbar-brand" href="#">WebSiteName</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div id="navb" class="navbar-collapse collapse hide">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 1</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 2</a>

      </li>

    </ul>



    <ul class="nav navbar-nav ml-auto">

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

      </li>

    </ul>

  </div>

</nav>

edited Nov 16 '18 at 16:39

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

There are no glyphicons in BS 4, you have to use Font Awesome. Since BS 4 has flexbox included, you align elements with ml-auto (align-right) and mr-auto (align-left).

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

  <a class="navbar-brand" href="#">WebSiteName</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div id="navb" class="navbar-collapse collapse hide">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 1</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 2</a>

      </li>

    </ul>



    <ul class="nav navbar-nav ml-auto">

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

      </li>

    </ul>

  </div>

</nav>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

  <a class="navbar-brand" href="#">WebSiteName</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div id="navb" class="navbar-collapse collapse hide">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 1</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 2</a>

      </li>

    </ul>



    <ul class="nav navbar-nav ml-auto">

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

      </li>

    </ul>

  </div>

</nav>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">

  <a class="navbar-brand" href="#">WebSiteName</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div id="navb" class="navbar-collapse collapse hide">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 1</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Page 2</a>

      </li>

    </ul>



    <ul class="nav navbar-nav ml-auto">

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

      </li>

    </ul>

  </div>

</nav>

edited Nov 16 '18 at 16:39

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

edited Nov 16 '18 at 16:39

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

answered Nov 16 '18 at 16:32

Razvan Zamfir

1,10411360

add a comment |

Try something like this (see it in full page):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <a class="navbar-brand" href="#">WebSiteName</a>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">First Page</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled Page</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

answered Nov 16 '18 at 14:26

Serge

3,29734292

add a comment |

Try something like this (see it in full page):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <a class="navbar-brand" href="#">WebSiteName</a>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">First Page</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled Page</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

answered Nov 16 '18 at 14:26

Serge

3,29734292

add a comment |

Try something like this (see it in full page):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <a class="navbar-brand" href="#">WebSiteName</a>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">First Page</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled Page</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

answered Nov 16 '18 at 14:26

Serge

3,29734292

Try something like this (see it in full page):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <a class="navbar-brand" href="#">WebSiteName</a>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">First Page</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled Page</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <a class="navbar-brand" href="#">WebSiteName</a>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">First Page</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled Page</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">

    <a class="navbar-brand" href="#">WebSiteName</a>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">First Page</a>

      </li>

      <li class="nav-item">

        <a class="nav-link disabled" href="#">Disabled Page</a>

      </li>

    </ul>

    <form class="form-inline my-2 my-lg-0">

      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

    </form>

  </div>

</nav>

answered Nov 16 '18 at 14:26

Serge

3,29734292

answered Nov 16 '18 at 14:26

Serge

3,29734292

answered Nov 16 '18 at 14:26

Serge

3,29734292

answered Nov 16 '18 at 14:26

Serge

3,29734292

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky