Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Css / Html / Javascript / Twitter Bootstrap

Navbar Is Vertical Instead Of Horizontal

Post a Comment
Why does this show a vertical list instead of a horizontal one?

Solution 1:

I removed the navbar-nav class and it's horizontal again. My best guess is that the navbar-nav class has some css associated with it that was overwriting the navbar-default styles.

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><divid="navigation"><navclass="navbar navbar-default"><ulclass="nav"><liclass="nav-item"><aclass="nav-link"href="/">Home</a></li><liclass="nav-item"><aclass="nav-link"href="/browse">Browse</a></li><liclass="nav-item"><aclass="nav-link"href="/create">Create</a></li><liclass="nav-item"><aclass="nav-link"href="/review">Review</a></li><liclass="nav-item"><aclass="nav-link"href="/help">Help</a></li></ul><formclass="form-inline"><ahref="#"onclick="signOut();">Sign out</a><divid="my-signin2"><!-- google oauth stuff --></div></form></nav></div>

Solution 2:

You can Remove the Background.

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><divid="menu-outer"><divid="table"><navclass="navbar navbar-default horizontal-list"><ulclass="nav navbar-nav"><liclass="nav-item"><aclass="nav-link"href="/">Home</a></li><liclass="nav-item"><aclass="nav-link"href="/browse">Browse</a></li><liclass="nav-item"><aclass="nav-link"href="/create">Create</a></li><liclass="nav-item"><aclass="nav-link"href="/review">Review</a></li><liclass="nav-item"><aclass="nav-link"href="/help">Help</a></li></ul><formclass="form-inline"><ahref="#"onclick="signOut();">Sign out</a><divid="my-signin2"><!-- google oauth stuff --></div></form></nav></div></div><style>#menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
    }
    ul#horizontal-listli {
        display: inline;
    }
</style>

Solution 3:

From what I see your issue is that lists are lists, ul and li will make vertical lists. If you want horizontal you need some css, or some style.

Try adding something like this:

<html><head><style>ulli {
    display:inline;
}
</style></head><body><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-    beta.2/css/bootstrap.min.css"><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-    beta.2/js/bootstrap.min.js"></script><divid="navigation"><navclass="navbar navbar-default"><ulclass="nav navbar-nav"><liclass="nav-item"><aclass="nav-link"href="/">Home</a></li><liclass="nav-item"><aclass="nav-link"href="/browse">Browse</a></li><liclass="nav-item"><aclass="nav-link"href="/create">Create</a></li><liclass="nav-item"><aclass="nav-link"href="/review">Review</a></li><liclass="nav-item"><aclass="nav-link"href="/help">Help</a></li></ul><formclass="form-inline"><ahref="#"onclick="signOut();">Sign out</a><divid="my-signin2"><!-- google oauth stuff --></div></form></nav></div></body></html>

Post a Comment for "Navbar Is Vertical Instead Of Horizontal"