Navbar Vertical

Asked

Viewed 3,028 times

2

   
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   
   
   <nav id='nav' class="navbar navbar-expand-lg fixed-top navbar-inverse" style=" background-color:black">
    <a class="navbar-brand" href='#'>
        <i style="color:white;" class="fa fa-home fa-w-18 fa-1x"></i>
        <span style=" color:white;  font-size: 20px;font-weight:bold;" href='#'>Home</span>
    </a>
    <button style='background-color:white;' class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span style='color:black' class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto" data-bind="foreach: router.navigationModel">
            <li class="nav-item" data-bind="css: { active: isActive }" onclick="ready()">
                <a class="nav-link" style="color:white; font-size:20px;font-weight:bold;" data-bind="attr: { href: hash }, text: title"></a>

            </li>
        </ul>
        <form id="searchbar" class="form-inline mt-2 mt-md-0 invisible">
            <input id="search1" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button id="search" type="button" class="btn btn-primary" style="margin: 5px">Search</button>
            <button id="reset" type="reset" class="btn btn-primary">Reset</button>

        </form>
    </div>
</nav>

How can I for this navbar equal, only oriented vertically on the right side of the page?

html css nav-bar

2 answers

1

Guy changes the standard behavior of the elements can always have side effects already gets the warning... but I made this model customizing some classes and I think that’s what you wanted. You may have to make small adjustments to the CSS, because as I told you, it’s an adaptation...

inserir a descrição da imagem aqui

Follow the code used to have the image above.

html,
body {
    height: 100%;
}
@media (max-width: 991px) {
    .navbar {
        max-width: 300px;
        right: 0;
        margin-left: auto;
        height: 100%;
    }
    .collapse.show {
        height: 90%;
    }
    .navbar-brand,
    .navbar-toggler {
        align-self: flex-start;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

</head>
<body>
    
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
        <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="#">Features</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        </ul>
    </div>
</nav>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

0

I noticed that you are using Bootstrap, it has a class called sidebar that can be placed in a <nav> do some tests to see if putting the sidebar class or similar in your navbar it looks like you want. Have this tutorial really good too: https://bootstrapious.com/p/bootstrap-sidebar

Maybe just changing the class .navbar for .sidebar and making styles only with CSS instead of Bootstrap style classes work.

Browser other questions tagged html css nav-bar

You are not signed in. Login or sign up in order to post.