So following up from my last forums, I was able to get my responsive menu nav bar working. And as well as how I want to center my two items using flex which a lot of people have recommended.
I updated my nav bar because it doesn't have a title in the menu bar so that worked out okay. Now what happened is when I opened it up, it brings down a drop down menu, but my items are not center and below my nav. Why is it acting like it "floats" to the right side of the page where it cannot be seen and cut off (especially when viewing it in iPhone mode). Take a look at my screenshot below and my codes and see what is troubling me.
When the hamburger icon is not tapped
When the hamburger icon is tapped
Here is my codes. Run the code snippet or better yet, copy and paste this into your text editor and run it from your browser so you can see what I'm talking about. NOTE: The code snippet does what I want to do when you run it but coming from my text editor and browser, it is not doing what I want to do.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
.summary {
min-height: 75vh;
max-width: 2000px;
display: flex;
align-items: center;
justify-content: center;
}
.profilePicture {
padding: 2rem;
}
.profileSummary {
max-width: 400px;
}
#media screen and (max-width: 800px) {
.summary {
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="script.js"></script>
</head>
<body>
<!-- The navigation menu -->
<div class="topnav" id="myTopnav">
Home
About Me
Portfolio
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="summary">
<div class="profilePicture">
<img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div class="profileSummary">
Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
</div>
</div>
</body>
</html>
The code and markup snippet originally posted by this user actually worked as expected. After further investigation, the issue was that the user had a second (duplicate) CSS class that was overriding their earlier CSS.
The first class was in a media query and by itself worked:
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
And this class was below it:
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
When the screen width was <= 600 px, the responsive class applied to the navbar and the hamburger menu icon appeared. But the second responsive class was constraining the width of the expanded menu to 25% of the container, which resulted in the undesired positioning.
In general with problems like this, it's usually a good idea to use the developer tools in your browser to see what CSS rules are being applied to the element in question. You can learn more about developer tools here.
Related
So I started a basic angular 5 project in Visual studio. In it, it created a component called nav-menu-component. It came with like a standard navigation menu and mobile option that when the screen was less than 726px it would change.
However, I am trying to have the mobile view be the default view the entire time(ie I want a horizontal bar with a button that expands and collapses the menu no matter the screen width). but for the life of me I can not figure out how to do that.
CSS and especially bootstrap are my weakest points. Please if anyone could help explain why the button will only appear when the screen is less than 726px let me know. I do know how #media works but there doesn't seem to be anything in the ts or css that I atleast see that tells me this is flipping the button from hidden to visible. I have removed the #media(min-width) but that still does not display the button.
I believe the bootstrap version is 3.4.1 in my package.json
here is the html
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
<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' [routerLink]='["/"]'>Codes</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
<ul class='nav navbar-nav flex-column'>
<li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
<a [routerLink]='["/"]' (click)='collapse()'>
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
</ul>
</div>
</div>
</div>
css
li .glyphicon {
margin-right: 10px;
}
.flex-column {
width: 100%;
}
.navbar {
padding: 0;
}
.navbar-brand {
padding: 15px;
}
.navbar-toggler {
margin-right: 15px;
}
.nav-link {
padding-left: 16px;
}
/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
#media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
typescript
import { Component } from '#angular/core';
#Component({
selector: 'app-nav-menu',
templateUrl: './nav-menu.component.html',
styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
isExpanded = false;
collapse() {
this.isExpanded = false;
}
toggle() {
this.isExpanded = !this.isExpanded;
}
}
Edit: Okay quick update I have changed the #media section to the below. but why did it seem like there was two #media sections even though I did a find all and could only find the one I am editing?
#media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.navbar-collapse.collapse {
display:none !important;
}
.collapse.in {
display: block !important;
}
}
the code at the media querie:
#media (min-width: 768px)
as it says in the comment is for convert the nav menu to a vertical sidebar, since you want a navbar and not a sidebar you can remove it completely.
And in Bootstrap 3 for have the mobile view be the default view the entire time you need to override the Bootstrap's default navbar behavior.
Here some examples:
Custom less file
Simple css override
Another css override and a method for bootstrap 4
I have added a responsive menu to a blog developed on CodeIgnitor. FYI, someone else made this blog.
Everything is working fine but the menu is not expanding in mobile device while clicking on the icon to expand the menu.
function myMenuFunction() {
var x = document.getElementById("nav");
if (x.className === "navMenuCustom") {
x.className += " responsive";
} else {
x.className = "navMenuCustom";
}
}
.navMenuCustom {
background-color: #333;
overflow: hidden;
font-weight: 900;
}
.navMenuCustom a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 8px 16px;
}
.navMenuCustom a:hover {
background-color: #ddd;
color: black;
}
.navMenuCustom a:active {
background-color: #4CAF50;
color: white;
}
.navMenuCustom .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navMenuCustom a:not(:first-child) {
display: none;
}
.navMenuCustom a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.navMenuCustom.responsive {
position: relative;
}
.navMenuCustom.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.navMenuCustom.responsive a {
float: none;
display: block;
text-align: left;
}
}
<div id="nav" class="navMenuCustom">
Learn Guitar Fast
Teach Yourself Guitar
How to Buy a Guitar
String Ninja
Easy Guitar Songs
Contact
Blog
<a href="javascript:void(0);" class="icon" onclick="myMenuFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
I have used w3schools tutorial to add responsive menu. Link to w3schools tutorial.
You can also check the live website here.
The reason your menu does not work is because you have "overflow: hidden".
Overflow hidden causes the other element's to not show up, this because they will appear underneath the parent div.
When your page is on mobile size you have to remove the "overflow: hidden" so that the other menu items can show up.
#media only screen and (max-width: 600px){
.navMenuCustom {
overflow: auto;
}
}
I would also give the a attributes a background-color.
.navMenuCustom a {
background-color: #444;
}
The only problem that is left is that your image has an higher z-index than your menu items, so it will appear above it.
You can fix this problem with the following code:
Add higher index on the element you want to appear on top.
#nav {
z-index: 10
}
#slideshow-main-homepage div img {
z-index: 9;
}
It works, but .navMenuCustom has overflow: hidden, so you do not see it.
Quick fix would be to add overflow: visible to the .navMenuCustom.responsive. But you will still see nothing, because the items have transparent background and light font color. You must set background-color to the .navMenuCustom.responsive a as well. Last problem will be that the header image will appear over the navigation. You can fix that by removing all the position: relative attributes of its elements (I counted three of them: #banner-home, #slideshow-main-homepage and <div style="...">), but I am not sure if it cannot broke anything else. You must test it a little bit.
It's because you declared height with !important in your #nav, I recommed removing it or use the code below.
#media screen and (max-width: 600px) {
#nav {
height: auto !important;
}
}
Need help! This is a side sliding nav menu. I need to change this navbar showing without having hamburger menu icon (instead of menu icon i needed 'home,about'...etc) in desktop screen but only needed in mobile screen. Here is the code I'm using:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>
</html>
Thanks many help.
A media query with max-width tells the browser to apply the styles when the browser shrinks to that size. Min-width is the opposite. It tells to browser to apply the styles when the browser grows to that size.
In the second media query you listed, which is the first one that will activate when shrinking your browser, you're telling it to display: none which will hide the element and will remove the space it occupies. You're also setting visibility: hidden which will only hide the element but not remove the space it occupies. Using visibility here is redundant.
In the first media query, which is the second one that will activate when shrinking your browser, you're telling it to display: block which will undo the previous display: none, but you're still also setting the visibility: hidden, rather than switching it to visibility: visible, so the element still won't display.
Here's a simple example of a mobile-first approach, rather than desktop-first like your example, to show / hide a class.
.my-mobile-image {
display: none; /* This is how it looks on mobile */
}
#media (min-width: 600px) {
.my-mobile-image {
display: block; /* This is how it looks on desktop */
}
}
Here is the media query for show/hide based on screen width. Change the media query min-width to fix specific viewport(mobile screen width)
.menu {display: none; /* Hide on Desktop */}
#media (min-width: 600px) {
.menu {display: block; /* Show on Mobile */}
}
Preview at JS Fiddle : https://jsfiddle.net/itsselvam/r9uxtgaf/
Just a quick tip!
If you are using bootstrap 4 you can use predefined classes to do this.
E.g. <div class="d-none d-md-block">Hamburger Icon code</div>
here the element has display none property for any screen that have a min-width less than 768px, and display block for min-width more than 768px.
I'm currently trying to upgrade my HTML and CSS skills by producing a Responsive Navigation Menu and I think I have got into a bit of a mess - here's my problem: when my page width is greater than 768px I wish to hide the div with the class "menu__hamburger" and show an unordered list of items with a DIV with the class "header__navigation". Should the page width be less than 768px I wish to show the div with the class "menu__hamburger" but drop the div "menu__hamburger" so it fills the whole width of the parent DIV with the class header.
Permit me to demonstrate with some images:
Layout greater than 768px
Layout less than 768px (notice how the header__navigation drops to the next row)
The reason I want to show the header__navigation currently is because I am styling the header__navigation. Later I wish to use a hidden checkbox to toggle the display of the header__navigation using css when the user clicks the div with the menu__hamburger class. However I think I have structured my HTML badly as I cannot get the header__navigation to "drop" and "take up a full row".
Here is my HTML so far (a jsbin is here: https://jsbin.com/wecemiyepe/edit?html,css,output):
<div class="header">
<div class="header__logo">
<img src="brand-logo.png">
</div>
<div class="menu__hamburger">
<label for="menuToggle">☰</label>
<input type="checkbox" id="menuToggle">
</div>
<div class="header__navigation">
<ul class="menu">
<li class="menu__item">Home</li>
<li class="menu__item">Company</li>
<li class="menu__item">Services</li>
<li class="menu__item">Products</li>
<li class="menu__item">Careers</li>
<li class="menu__item">Contact</li>
</ul>
</div>
</div>
Here is my CSS
.header {
display: flex;
background-color: black;
border-bottom: 1px solid white;
align-items: center;
}
.header__logo {
flex: 0 1 30%;
padding: 10px 20px;
}
.header__navigation {
flex: 1 1 auto;
align-items: flex-end;
padding: 10px 20px;
}
.menu {
margin: 0;
padding: 0;
color: white;
list-style: none;
display: flex;
}
.menu__item {
flex: 1 1 auto;
}
.menu__hamburger {
color: white;
display: none;
}
input[type=checkbox] + label {
display: none;
}
#media only screen and (min-width: 320px) and (max-width: 768px) {
.menu__hamburger {
color: white;
display: flex;
justify-content: flex-end;
font-size: 40px;
}
input[type=checkbox] {
display: none;
}
/*
ToDo - toggle display of .menu if is checked
input[type=checkbox]:checked
*/
.menu {
/* display: none; */
flex-direction: column;
flex: 1 0 100%;
}
.menu__item {
text-transform: uppercase;
border-bottom: 1px solid #fff;
padding: 10px;
}
}
I'll continue to persevere with my code but if someone can give me a tip to get this working I will be most appreciative. Once again here is a link to a JSbin with the code: https://jsbin.com/wecemiyepe/edit?html,css,output
So first why you need that (min-width: 320px)?
Better delete it, and you want when the user click on the hamburger menu , the unordered list to be displayed?
I'm not sure if I totally understand your ask, but it seems like you are looking to put your navigation into a hamburger menu on smaller screens. I could type out the code but there is a pretty clear explanation on w3schools on how to create this. Hope this helps! 👍
I'm having two issues with Bootstrap's navbar dropdown. First, the dropdown from the navbar is not working on each page. The look of the Navbar is shown below.
The Calendar is a Google calendar that is being embedded into the page. Whenever I click on the calendar link itself, the dropdown does not work. If I attempt to navigate to another page after clicking on the calendar page, the dropdown also does not work. However, if I navigate to another page and then reload the page, the dropdown works again. Any idea what may be causing this issue?
The second problem revolves around collapsing the navbar when the window size changes. The way I have it set, the entire navbar should collapse when the screensize is less than 1200 pixels, and clicking the collapsible should extend the navbar to a height of 85vh. While the navbar does collapse at 1200px, the collapsible does not extend to a height of 85vh until hitting the default of 767px. My code for this is shown below:
#media screen and (max-width: 1200px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
#nav-portallinks {
li a {
color: white;
}
li a:hover {
color: black;
}
.divider {
width: 25vw;
margin-left: 0;
}
font: {
family: $font-text;
size: 2vw;
}
max-height: 85vh;
overflow: auto;
background-color: $cardinal;
width: 25vw;
margin-left: 50vw;
}
}
Any ideas?
In regards to unresponsive dropdown you are probably having some conflict between the calendar and bootstrap's behavior, maybe isolating the issue in a fiddle or sharing some of the code would help to identify it.
For bootstrap 3.3.x here is the CSS you need to toggle collapse on 1200px:
#media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
See working example
Another alternative would be to change the variable $grid-float-breakpoint: to $screen-lg-min !default; (which is 1200px) and recompile via SASS, default is 768px.