CSS: navbar items on top of each other? - html

in my page the navbar menu items show on top of each other.
Why?
Codepen:
https://codepen.io/ogonzales/pen/mdeNNLB
Code:
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="height: 70px;" id="top-navbar">
<img src="" alt="Ministerios Elim" width="2%" height="50%"/>
<a class="navbar-brand" href="" style="margin-right: 5%;"><span style="margin-left: 3%;">Ministerios Elim</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul>
<li>
Home
</li>
{% for item in navigation.menu_items.all %}
<li>
<a href="{{ item.link }}" class="nav-link" {% if item.open_in_new_tab %} target="_blank" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
<form class="form-inline ml-auto">
Ingresar
Registro
</form>
</div>
</nav>

This is the default behaviour of items inside an unordered list (ul), which are block elements. You need to make them inline-block if you want them to appear on one line.
For example, try adding this code to your CSS:
#navbarCollapse ul li {
display: inline-block;
}
You will see that the items are no longer all underneath each other.
If the options still don't all appear on one line, you are probably having the problem (at least it looks to me like you would, from your codepen you have provided) that the width of your container is not large enough to fit all the elements in it.
Consider making this wider, or displaying less navigation options if design constraints and screen sizes don't allow any more.

You can add "display: inline-block" to your <li>

Related

Aligning elements in Bootstrap navbar

I have a Bootstrap 4 navbar where I cannot align the center elements on all devices (or any for that matter). Currently, there is an image on the left of the navbar and I am currently using padding to push the rest over but this is an ugly hack at best.
What I think needs to be done is the navbar needs to stretch all the way across the top of the page, instead of only to the image. That way I can align the elements to the center using something like a text-justify class.
What is the best way to align this?
HTML:
<!--Site header-->
<header class="site-header" id="top-bar">
<!-- Navbar-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top ml-auto">
<div class="container col-md-12">
<!-- Image on the left of the navbar -->
<div class="navbar-nav mr-auto" style="padding: 0 100 0 20;">
<a href="{% url 'landing' %}">
<img id="header-img" src="{% static '/bg/WEBSITE-LOGO.png' %}"/>
</a>
</div>
<button aria-controls="navbarToggle"
aria-expanded="false"
aria-label="Toggle navigation"
class="navbar-toggler"
data-target="#navbarToggle"
data-toggle="collapse"
type="button">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links I want aligned to center of navbar -->
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav m-auto">
<div class="header-icon-container d-xs-none">
<a class="nav-item nav-link d-xs-none" href="{% url 'overview' %}" id="overview">
<i class="fas fa-home fa-2x"></i>
<span>Home</span>
</a>
</div>
<div class="header-icon-container">
<a class="nav-item nav-link" href="#" id="drills">
<i class="fas fa-dumbbell fa-2x"></i>
<span>Drills</span>
</a>
</div>
</div>
<!-- Navbar Right Side - more links -->
<div class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<div class="btn-group text-right">
<button class="account-dropdown"
data-toggle="dropdown"
type="button">
<img class="account-header-img" src="{{ user.image.url }}">
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="{% url 'overview' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Test stats">
</form>
</li>
<li>
<form action="{% url 'categories' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Categories">
</form>
</li>
<li>
<form action="{% url 'profile' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Update profile">
</form>
</li>
<li>
<form action="{% url 'logout' %}"
class="small-form"
method="get">
<input class="btn btn-link link-white"
type="submit"
value="Logout">
</form>
</li>
</ul>
</div>
{% else %}
<a class="nav-item nav-link ml-auto" href="{% url 'login' %}">
<i class="fas fa-sign-in fa-2x"></i>
<span>Sign in</span>
</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
Option 1:
Make your navbar 100% with, create a mobile and a desktop cas (d-none d-md-block) Remove the toggle div and you should have 3 div with content insider your nav. Make it display: flex with justify-content: space-around. => 1 div (logo) is left , 2 div (links) center, 3 div (forms) right
Option 2:
log + wrapper div wich takes the rest of the space + 2 more divs each 50% and make them text-align: center, text-align: right (poor solution)
Option 3: Navbar 100%, position relative. Img position: absolute; left: 0;, ...
I'd go for solution No.1

how to move a object on left if screen size decreases?

I have a menu with links and when I decrease the screen resolution, the last buttons shrink, and I need to move all the objects to the left when reducing the screen size
Damn, you need to write something in order for the code to be added so I'll sing some song
[Куплет 1, Ольга Бузова]:
Easy, simple. And now it doesn't seem
So endless here without you.
Nights together. But I don't really care
Whatever what you wanna do.
[Переход]:
In my Universe, you were the one,
The only one that I’ve ever been around.
But it turned out that you’re not irreplaceable'
And now I'm opening a whole new world
Читать на сайте: https://www.gl5.ru/b/buzova_olga/olga-buzova-not-enough-for-me.html
<div class="navbar navbar-inverse " id="headwrap" >
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="{% static 'MainPage/image/logo.png' %}" >
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="li">Главная</li>
<li class="li">Программы</li>
<li class="li">О нас</li>
<div class="dropdown">
<li class="li dropbtn "><a id="lessons" href="/news/">Уроки</a></li>
<div class="dropdown-content">
Django
Java
</div>
</div>
{% if user.is_authenticated %}
<li class="li">Профиль</li>
{% endif %}
</ul>
<ul class="nav navbar-nav" id="reg">
{% if user.is_authenticated %}
<li> <img src="{% static 'MainPage/image/Выход.png' %}" > </li>
{% else %}
<li> <img src="{% static 'MainPage/image/Войти.png' %}" > </li>
<li> <img src="{% static 'MainPage/image/Регистр.png' %}" > </li>
{% endif %}
</ul>
</ul>
</div>
Here is a sample Media query for your css.
#media only screen and (max-width : 1200px)
{
.download-button a
{
margin-right: 10px;
}
}
You can define min and max-width and put specific CSS in.
There is a certain fix width for a different resolution, eg. mobile, tablet, monitor.
While developing go from small top big Screen resolution.

Bootstrap navbar behaviour on mobile

I am building a Bootstrap 4 site using Jekyll. I have a jumbotron on each page which is working as a hero header. Everything works great until I resize to a mobile viewport. At this point the jumbotron gets tucked beneath the fixed header instead of occupying its own space beneath it. As shown in image.
When I unfix the header, the flow behaves normally. I have yet to make any style changes. So far all I am working with is Bootstrap HTMS and default stylings
How can I prevent this from happening whilst retaining a fixed header? I have posted both the body and nav HTML that I am using within Jekyll to build the pages.
Sincere thanks in advance for any pointers :)
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<!--Site logo-->
<a class="navbar-brand" href="#">Thomas Bishop</a>
<!--Collapse nav on mobile viewports-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--Nav links-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!--Home-->
<li class="nav-item active">
<a class="nav-link" href="{{ site.baseurl }}/">Home <span class="sr-only">(current)</span></a>
</li>
<!--Services-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/services">Services</a>
</li>
<!--Expertise-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/expertise">Expertise</a>
</li>
<!--Blog-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/blog">Blog</a>
</li>
<!--About-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/about">About</a>
</li>
<!--Contact-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
---
layout: default
title: Content Usage Policy
permalink: /content-usage-policy
---
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="jumbotron jumbotron-fluid bg-light">
<h1 class="display-4 d-flex justify-content-center">Content Usage Policy</h1>
<p class="lead d-flex justify-content-center">Optional sub-heading or meta description</p>
</div>
</div>
</div>
</div>
As you are using class jumbotron it's providing padding-top: 4rem in large devices and padding-top: 2rem in small devices that's why your content overlap with the header in the small devices.
FYI as position: fixed is applied on the nav, for the other elements on the page nav does not exist so your next div will also start from top: 0. Inspect the element and view <div class="container-fluid"> you can see it also started from top:0. To fix this issue do the following:
body > .container-fluid {
padding-top: 40px;
}
By applying this css, gap between nav and content will increase and if you don't want this extra gap than instead of applying above css rule just apply this for small devices.
#media (max-width: 576px) {
body > .container-fluid {
padding-top: 20px;
}
}
And place this css such that it will load after the bootstrap's main css.
Simply apply a margin-top or padding-top equivalent to your fixed header height to your jumbotron using a mobile media query. Here is a link to a pen detailing a fixed header behavior.

Bootstrap 3 Navbar not working on mobile

My Bootstrap Navbar isn't working on mobile phone view (when it can't display the links). I can't click the button. After many research on Internet and StackOverflow, I tried out the solution and no one works. These are the solutions that I tried;
Verify the data-target and id. As here Check
Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> Here Check
Add CSS .dropdown-backdrop { position: static; } On Stack, somewhere
Here is my navbar code;
<nav id="layout-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">7 Frères</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="navigationbar">
<ul class="nav navbar-nav">
{% for item in staticMenu.menuItems %}
<li class="{% if item.isActive %}active{% endif %}">{{ item.title }}</li>
{% endfor %}
</li>
</ul>
</div>
</div>
</nav>
Thanks!
The issue is that you are not including the Bootstrap Javascript(necessary for using the built-in dropdown menu) on your page. Once you have included that, it should work:
<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap navbar hamburger is opening but not closing

On a phone sized screen, when I click the hamburger once, the navbar opens fine. When I try to close it, nothing happens - it's stuck. Where have I gone wrong? Here's my html:
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-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>
<a class="navbar-brand" href="http://{{base_url}}">My Teams</a>
</div>
<nav class="collapse navbar-collapse" id="teams-navbar-collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>
<a href="{% url 'profile_page' user.pk %}">
My Profile
</a>
</li>
<li>
Logout
</li>
</ul>
{% else %}
{% block login_button %}{% endblock %}
{% endif %}
</nav>
</div>
</header>
I would say this is actually an issue with jQuery Toggle. Please ensure jquery is set to toggle "collapsed". One of the ways bootstrap works is by adding/removing classes to buttons/divs/html elements to display them based on css. For example. Pretty Select dropdowns work by adding "open" to a specific div before or after the select button. Hense you can use jQuery to toggle that open when it's clicked. I hope this helps.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-navbar-collapse">
<script type="text/javascript">
$( document ).ready(function() {
$("button.navbar-toggle").click(function(){
$("button.navbar-toggle").toggleClass("collapse");
});
});
</script>