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
Radha Kapoor
source
to share
3 answers
I finally figured it out - there should be .navbar-right instead of .pull-right! Hope this helps someone in the future!
+6
Radha Kapoor
source
to share
This is what you need in your .css styles Try it.
+1
parfa
source
to share
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
Feroza
source
to share