Set up nav navigation vertically but when pressed left
I built my nav links to pull-right (which is how I want it), but after the link collapses also pull-right, which looks weird (see image). I would like to figure out how to change the code so that the navigation stays on the left when collapsed. Demo
Please let me know if you can help.
My template code and site CSS code is below:
![<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/site-specific.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar- collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav pull-left">
<li><a href="{{ url_for('index') }}">Home</a></li>
<li><a href="{{ url_for('about') }}">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse by Neighbourhood<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ url_for('notting_hill') }}">Notting Hill</a></li>
<li><a href="{{ url_for('marylebone') }}">Marylebone</a></li>
<li><a href="{{ url_for('west_end') }}">West End</a></li>
<li><a href="{{ url_for('mayfair') }}">Mayfair</a></li>
<li><a href="{{ url_for('soho') }}">Soho</a></li>
<li><a href="{{ url_for('covent_garden') }}">Covent Garden</a></li>
<li><a href="{{ url_for('chelsea') }}">Chelsea</a></li>
<li><a href="{{ url_for('camden') }}">Camden</a></li>
<li><a href="{{ url_for('shoreditch') }}">Shoreditch</a><li>
<li><a href="{{ url_for('tower_bridge') }}">Tower Bridge</a><li>
<li><a href="{{ url_for('index') }}">All</a><li>
</ul>
</li>
<li><a href="{{ url_for('contact') }}">Contact</a></li>
</ul>
</div><!--.nav-collapse-->
</div>
</div>
<h1>LONDON</h1>
{% block content %}{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
.navbar {
background-color: #33B833;
font-family: 'Raleway', sans-serif;}
.navbar .nav > li > a {
color: #ffffff;}
.navbar .nav > li > a:hover {
color: #000000;}
.navbar-inverse .navbar-nav > .open >a:hover, .navbar-inverse .navbar-nav > .open >a:focus, .navbar-inverse .navbar-nav > .open >a {
background-color: #33CC33;
}][4]
+3
source to share
3 answers
Add Pull-right class to dropdown menu
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse by Neighbourhood<span class="caret"></span></a>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="{{ url_for('notting_hill') }}">Notting Hill</a></li>
<li><a href="{{ url_for('marylebone') }}">Marylebone</a></li>
<li><a href="{{ url_for('west_end') }}">West End</a></li>
<li><a href="{{ url_for('mayfair') }}">Mayfair</a></li>
<li><a href="{{ url_for('soho') }}">Soho</a></li>
<li><a href="{{ url_for('covent_garden') }}">Covent Garden</a></li>
<li><a href="{{ url_for('chelsea') }}">Chelsea</a></li>
<li><a href="{{ url_for('camden') }}">Camden</a></li>
<li><a href="{{ url_for('shoreditch') }}">Shoreditch</a><li>
<li><a href="{{ url_for('tower_bridge') }}">Tower Bridge</a><li>
<li><a href="{{ url_for('index') }}">All</a><li>
</ul>
0
source to share