I'm trying to have a drop down menu within a navbar; however, it only displays until the limit of my navbar when, ideally, id like it to be "in front" of the navbar so to speak.
Dropdown is cut off
I am new to html and CSS so my exploration is somewhat limited. I have implemented one of bootstrap's navbar's and also used their dropdown button html. I expected this to work okay but, as stated, the dropdown seems to be bound within the navbar (assuming this is because it is within the navbar div?) I have also attempted to follow w3schools guide but I didn't succeed with that either.
Sidenote: because of the limited visibility, the "my account" button logs the user out, this is intentional for now lmao.
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="logo" href="/"><img src="static/Logo_2.png" alt="Logo"></a>
<div class="navbar-nav">
{% if not session["id"] %}
<a class="nav-link" href="login">Log In</a>
{% endif %}
{% if session["id"] %}
<a class="nav-link" href="languages">Languages</a>
<a class="nav-link" href="faq">FAQs</a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Account
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="logout">My Account</a></li>
<li><a class="dropdown-item" href="logout">Log Out</a></li>
</ul>
</div>
{% endif %}
</div>
</div>
</nav>
{% if get_flashed_messages() %}
<header>
<div class="alert alert-primary mb-0 text-center" role="alert">
{{ get_flashed_messages() | join(" ") }}
</div>
</header>
{% endif %}
<main class="container-fluid py-5 text-center">
{% block main %}{% endblock %}
</main>
</body>
.navbar {
height: 100;
overflow: hidden;
}
.navbar-nav {
align-items: baseline;
display: flex;
float: right;
gap: 3em;
}
.nav-link {
color: black;
display: flex;
float: right;
}
.nav-link:hover {
color: red;
}
.btn-secondary {
background: none;
border: none;
color: black
}
.btn-secondary:hover {
background: none;
border: none;
color: red;
}
.logo {
display: flex;
scale: 0.4;
transform-origin: left;
}
your example should be cut down to just the minimum that displays the issue. you have extra classes, some ASP-like code, etc - none of that is needed and just makes it harder to diagnose.
the issue appears to be that your submenu is contained inside the top-level .navbar element, but you are constraining that to have a height of 100 (and you should include the metric here - 100px? 100cm?) with overflow being hidden. this means that the submenu gets cut off.
you could just remove those constraints.
a better solution would involve a rewrite, so the submenu items are positioned absolutely, in a relatively-positioned placeholder. there are examples of this online. example: https://gist.github.com/SamWM/901853
{% if not session["id"] %}
Log In
{% endif %}
{% if session["id"] %}
Languages
FAQs
Account
My Account
Log Out
{% endif %}
...
Remove the "overflow: hidden;" style from .navbar css, so your code should be-
.navbar {
height: 100;
}
Related
Goal:
I would like to create a bootstrap row where there is a carousel on the left and text blocks on the right. I have labeled these "Left Column" and "Right Column" respectively within the HTML comments.
Problem:
I'm not able to get the carousel and text to stay in columns. Instead, they stack on top of each other, with the carousel on top and the next column going below it.
Context:
I've tried a few different things by moving around divs and creating new ones. I've already tried to remove the flex CSS styling and I've tried to remove all padding and margins. I've reviewed several stack overflow questions that seemed similar, but none of the problems seems similar to mine or the suggestions do not help.
It does not appear that there is anything within the main CSS that is causing this issue, because I am able to get other columns and rows to work correctly on the same page. However, I'm adding it here just in case with a screenshot.
HTML
<div class="container">
<div class="row">
<!-- Left Column Start -->
<div class="col-6" id="carousel-contain">
<div id="plantCarousel" class="carousel slide col-6" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
{% for image in plant.plant_images.all %}
{% if forloop.first %}
<li data-target="#plantCarousel" data-slide-to="{{forloop.counter0}}" class="active"></li>
{% else %}
<li data-target="#plantCarousel" data-slide-to="{{forloop.counter0}}"></li>
{% endif %}
{% endfor %}
<li data-target="#plantCarousel"></li>
</ol>
<div class="carousel-inner">
{% for image in plant.plant_images.all %}
{% if forloop.first %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<img src="{{ image.images.url }}" alt="{{ plant.name }}">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#plantCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#plantCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Left Column Ends -->
<!-- Right Column Start -->
<div class="col-6">
<p> <b>Latin Name: </b>{{ plant.latin_name }} </p>
<br>
<p><b>Description: </b></p>
<p> {{ plant.description }} </p>
<br>
<br>
</div>
<!-- Right Column Ends -->
</div>
</div>
CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
img {
max-width: 100%;
max-height: 100%;
}
How it appears on the page:
After digging around even further, I discovered that I accidentally added an extra </div> which caused my row to end before the right column could be added into the row.
I have a multiple selection and would like to be able to click on it to manage the answers on a /getmatch page. At the moment I have no visual cue that I have selected things:
[]]1
So how to make the selection of multiple items responsive?
Here is the code from the page that gives these buttons:
{% extends "todo/base.html" %}
{% block content %}
<style>
.elements {
display: block;
}
ul.items {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
li.item {
flex: 1 0 20%;
padding: 8px;
margin: 2px;
border-radius: 8px;
border: 1px solid rgba(61, 86, 233, 0.3);
text-align: center;
}
.col {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="col-lg-5 mr-auto order-lg-2">
<h3><br>Tell me something about you... </h3>
</div>
</div>
</header>
<!-- Page Content -->
<section class="content-section-a">
<div class="container">
<dt>
<span>Pick the keywords you want to express when wearing perfume</span>
</dt>
<form action = "/getmatch" method="POST">
{% for keyword in keywords %}
<div class="elements">
<ul class="items ">
<li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
<div class="box">
<div data-toogle="buttons" class="col">
<span>{{ keyword.title }}</span>
</div>
</div>
</li>
</ul>
</div>
{% endfor %}
{% csrf_token %}
<button type="submit">Envoyer</button>
</form>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="static/vendor/jquery/jquery.min.js"></script>
<script src="static/vendor/popper/popper.min.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >
{% endblock %}
I tried to add things in the balisa .
button:hover{background-color:orange;}
button:focus{background-color:red;}
But it didn't modified anything
I can't add a comment since i don't have the required rep points (new to stack overflow, sorry if this isn't allowed), but I am not sure what you're trying to do, if you want to give a visual cue that a button has been selected for more than one button at a time, you need to grab the list of buttons, add an event listener on click that toggles a class on/off, then add styling to that class, so that when the item has that class it has a specific style.
Edit on how to do that:
P.S i've never used Django, but i think you should do this, since the way you're doing it is generating a ul for each keyword
<form action = "/getmatch" method="POST">
<div class="elements">
<ul class="items ">
{% for keyword in keywords %}
<li class="item col-xs-6 col-sm-3 col-md-3 col-lg-3">
<div class="box">
<div data-toogle="buttons" class="col">
<span>{{ keyword.title }}</span>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
{% csrf_token %}
<button type="submit">Envoyer</button>
</form>
Now you need to select the list elements, an easier way to do this would be something called event delegation https://javascript.info/event-delegation
so create a script tag/or file and import it, inside your script you neeed the following :
//Select the UL list
const myItemsList = document.querySelector(".items");
//function passed to event listener as callback, toggles the selected class if the target is a list
const toggleListClass = (event) => {
let target = event.target;
if (target.tagName !== "li") return;
target.classList.toggle("highlight");
};
//Add an event listener to the ul list
myItemsList.addEventListener("click", toggleListClass);
Now in your css add a selector for class hightlight
.hightlight {
color: whatever
}
Recently I tried adding functionality to a website I am making by making the current section the user is on appear as "highlighted" in the navbar. In order to do this, I added this JQuery script to my code:
<script type="text/javascript">
$(document).on('click', '.navbar-end a', function() {
$(this).addClass('active').siblings().removeClass('active');
});
</script>
This function determines which section of the navbar was clicked and adds the class "active" to the specific anchor tag. The class "active" is styled with a different color so that it appears different from the other navbar elements.
My Navbar:
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div id="navbar" class="navbar-menu">
<div class="navbar-end">
<a href="{{ url_for('welcome') }}" class="active">
Home
</a>
{% if not current_user.is_authenticated %}
<a href="{{ url_for('login') }}" class="navbar-item">
Login
</a>
<a href="{{ url_for('signup') }}" class="navbar-item">
Sign Up
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('index') }}" class="navbar-item">
My Tasks
</a>
<a href="{{ url_for('logout') }}" class="navbar-item">
Logout
</a>
{% endif %}
</div>
</div>
</div>
</nav>
CSS:
a {
color: #b2b1b1;
font-family: Lato;
display: inline-flex;
margin: 20px;
padding: 3px;
padding-left: 20px;
text-decoration: none;
}
.active {
color: #19dafa !important;
}
Now I will describe the issue I am facing. After making these changes, when I click on a tab on the Navbar on my site, it only momentarily changes to the color specified by the active class. For a split second the color is #19dafa, but then it changes back to #b2b1b1 immediately after (without me clicking on a different Navbar section). This led me to believe that the color was immediately getting overwritten by another style. After trying to debug around this claim, I was unable to find any fixes. Any ideas as to what could be causing this?
I have a dropdown in BS4 navbar. The content goes out of the container on mobile device. I want to wrap the text through css.
Following code works:
HTML:
<div class="dropdown-menu" >
{% for department in object.departments.all %}
<a class="dropdown-item text-wrap" href="">
{{ department.name }}</a>
{% endfor %}
</div>
CSS:
.dropdown-menu {
width: 30vw;
}
But following code doesnt work:
HTML:
<div class="dropdown-menu" >
{% for department in object.departments.all %}
<a class="dropdown-item" href="">
{{ department.name }}</a>
{% endfor %}
</div>
CSS:
.dropdown-menu {
width: 30vw;
}
.dropdown-item{
text-wrap:normal;
}
I think you are looking to use the white-space property or possibly to use word-wrap or text-overflow.
I've not heard of the text-wrap property in css.
I am trying to make a website with a horizontal navigation bar. I found a useful reference, but I couldn't figure it out to be adopted to my current code since I am not an expert with HTML and CSS.
I like to create similar bar like this:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
And below are my current code:
{% block sidebar %}
<ul class="sidebar-nav">
<li>Home</li>
<li>All users</li>
<li>All productss</li>
<!-- <li>All vendors</li> -->
</ul>
{% endblock %}
.sidebar-nav {
margin-top: 20px;
padding: 0;
list-style: none;
}
================================================================
Thank you for your help, but none of below three answers worked.
Here I add more of my .css code. I am guessing "col-sm-2" ruled my current code, but don't know how to adjust it to make a horizontal navigation bar.
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
{% block sidebar %}
<ul class="sidebar-nav">
<li>Home</li>
<li>All users</li>
<li>All productss</li>
<!-- <li>All vendors</li> -->
</ul>
{% endblock %}
</div>
<div class="col-sm-10 ">{% block content %}{% endblock %}</div>
</div>
'''
The trick to get the list elements stack horizontally is to use the attribute float:left on the list items. Try adding something like this in your css-code
.sidebar-nav li {
float:left;
}
By writing .sidebar-nav li you apply the style to all list-items (li) that is a child of sidebar-nav.
Update:
Now that we know you're using bootstrap, you can make a horizontal navbar just by adding a few classes:
The following code gives you a navbar with beautiful padding and margins:
Bootstrap navbar reference: https://getbootstrap.com/docs/4.3/components/navs/
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!--'col-sm-12' to 'col-12' for 100% width -->
{% block sidebar %}
<ul class="sidebar-nav nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'index' %">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="">All users</a></li>
<li class="nav-item">
<a class="nav-link" href="">All productss</a>
</li>
<!-- <li class="nav-item"><a class="nav-link" href="">All vendors</a></li> -->
</ul>
{% endblock %}
</div>
<div class="col-sm-10 ">{% block content %}{% endblock %}</div>
</div>
</div>
The previous 'non-bootstrap' answer:
The goal is to align the "li" items horizontally so a simple and easy way is :
.sidebar-nav li{
display: inline;
}
Display property reference:
https://www.w3schools.com/cssref/pr_class_display.asp
EDIT: I Assume you are using the bootstrap grid system.
The class col-sm-2 means your div will occupy 1/6th or 16.66% of the total container width on devices having screen width greater than 767px.
If you want your menu items to occupy the entire screen width, replace col-sm-2 with col-sm-12.
My preferred way to do this is using flex.
.sidebar-nav {
display: flex;
}
This will ensure all elements inside the ul are displayed in a single line and they all have the same height which is equal to the height of the ul. Hope this helps.