Navbar Vertical

Question

Navbar Vertical

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

   
   <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><scriptsrc="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><navid='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 by this navbar equal, only that vertically oriented on the right side of the page?

html css nav-bar

asked by anonymous 14.12.2018 / 18:28

2 answers

Error making UTL_HTTP request. ORA-28759: failure to open file NodeJS - TypeError: Can not read property 'get' of undefined

score 0 · Answer 1

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 class sidebar or similar in your navbar it stays the way you want it. You have this very good tutorial too: link

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

score 0 · Answer 2

Face changes the default behavior of the elements can always have side effects is the warning ... but I made this template by customizing some classes and I think it was what you wanted. You may have to make small adjustments in CSS, because as I told you, it's an adaptation ...

Followthecodeusedtohavetheaboveimage.

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><scriptsrc="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>