This is supposed to show no icons in mobile device.
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
so this "Menu" gotta be hidden, but its showing all these icons still.
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu
</a>
</li>
You've added the hidden-xs to the <br> element instead of the span.glyphicon. Change your code to this instead
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery hidden-xs"></span><br> Menu
</a>
</li>
You have assigned <br> the target class which will not do anything. Instead add the class to the <span>
#media screen and (max-width: 767px) {
.hidden-xs, .glyphicon{
display: none !important;
}
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu
</a>
</li>
#media screen and (max-width: 767px) add on screen
add css display:none; on both class.hidden-xs, .glyphicon
Related
Design a web page which should contain Bootstrap’s responsive navigation bar, a responsive circle image and a responsive footer.
The snap shot of the web page is given below:
Image 1: Web page in large devices
https://drive.google.com/file/d/1szF9Fc8uX_2wtVw2ase_Lxmg_7ZHitzy/view?usp=sharing
Image 2: web page in small devices:
https://drive.google.com/file/d/1RclzRGsN_PTptMHzrDznFlTzrY2yK5fc/view?usp=sharing
Note:
The web page ‘responsive.html’ template is given. You have to write the code only for the specified part of the 'responsive.html' file and 'app.css' file.
Key Points:
Add responsive feature to the navigation bar. The collapsing nature is tripped by a button with the id ‘btn-id’ belongs to Bootstrap’s navigation toggle class and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates various elements like navigation links, forms, and other contents to toggle
Set the navigation brand as ‘MyBrand’.
Create three icon bars (hamburger button) with appropriate Bootstrap class. This will toggle the elements that are in the navigation collapsible div tag.
Add responsive features to the images so that it can automatically adjust to fit the size of the screen.
Make the image to scale down if it has to, but never scale up to be larger than its original size. Set the properties accordingly. For this override necessary css properties of the ‘img-responsive’ class in ‘app.css’ file. Set the max-width of the image to 100% and height to 'auto'.
After written the code I am facing some errors :
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 3 : Set 3 icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
Can you please tell what should I do after this to resolve these errors.
Here is the code I have written :-
body {
font-family: 'Open Sans', sans-serif;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
article {
padding: 40px;
}
article img {
text-align: center;
box-shadow: 6px 6px 8px #777;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
article p {
font-size: 16px;
}
.img-responsive {
max-width: 100%;
height: auto;
}
/* The following code is used to create same-sized columns
in a multi-column layout.
Code from:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
*/
/* columns of same height styles */
.container-xs-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-xs-height {
display: table-row;
}
.col-xs-height {
display: table-cell;
float: none;
}
#media (min-width: 768px) {
.container-sm-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-sm-height {
display: table-row;
}
.col-sm-height {
display: table-cell;
float: none;
}
}
#media (min-width: 992px) {
.container-md-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-md-height {
display: table-row;
}
.col-md-height {
display: table-cell;
float: none;
}
}
#media (min-width: 1200px) {
.container-lg-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-lg-height {
display: table-row;
}
.col-lg-height {
display: table-cell;
float: none;
}
}
<!-- DO NOT ALTER THIS TEMPLATE. FILL YOUR CODE IN THE SPECIFIED PLACES -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#btn-id">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- FILL YOUR CODE FOR BRAND AND TOGGLE (ICON BAR) FOR RESPONSIVE NAVIGATION BAR -->
<a class="navbar-brand" href="#">MyBrand</a>
</div>
<!-- Collect the nav links, forms, and other contents for toggling -->
<div class="collapse navbar-collapse" id="btn-id">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<div class=" ">
<div class=" ">
<section class=" ">
<article>
<!-- WRITE YOUR CODE FOR RESPONSIVE CIRCLE IMAGE -->
<img class="img-responsive img-circle" id="image" src="https://www.capecod.com/wp-content/gallery/nature-walk-through-harwich-conservation-trust-lands/SK_West-Harwich-Nature-Walk-Through-Consevation-Trust-Lands_10.23.18-7.jpg" alt="Nature Image" />
</article>
</section>
</div>
</div>
<footer class="footer">
<p class=" ">Lorem ipsum</p>
</footer>
</body>
</html>
Try changing the id of collapsable div from "bin-id" to "bs-example-navbar-collapse-1" so it will look something like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
This will remove the following errors:
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
For the error,
Fail 3 : Set 3 icon bar for the 'span' tags
Try removing the first span (Toogle Navigation) as only 3 span tags are required.
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
I am trying to move my first nav link (home icon) down so it doesn't get covered by the 'book free consultation' button above. It doesn't seem to apply the padding and not sure what I am doing incorrectly
CSS:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
HTML:
<div class="header-navigation-wrapper">
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<div id="mega-menu-wrap-primary" class="mega-menu-wrap">
<div class="mega-menu-toggle">
<div class="mega-toggle-blocks-left"></div>
<div class="mega-toggle-blocks-center"></div>
<div class="mega-toggle-blocks-right">
<div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-1" id="mega-toggle-block-1" tabindex="0"><span class="mega-toggle-label" role="button" aria-expanded="false"><span class="mega-toggle-label-closed">MENU</span><span class="mega-toggle-label-open">MENU</span></span></div>
</div>
</div>
<ul id="mega-menu-primary" class="mega-menu max-mega-menu mega-menu-horizontal" data-event="hover_intent" data-effect="disabled" data-effect-speed="200" data-effect-mobile="slide_left" data-effect-speed-mobile="400" data-mobile-force-width="body" data-second-click="close" data-document-click="collapse" data-vertical-behaviour="accordion" data-breakpoint="1023" data-unbind="false" data-hover-intent-timeout="300" data-hover-intent-interval="100">
<li class="mega-nav-menu-links mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-home mega-current-menu-item mega-page_item mega-page-item-2 mega-current_page_item mega-align-bottom-left mega-menu-flyout mega-menu-item-1521 nav-menu-links" id="mega-menu-item-1521"><a class="mega-menu-link" href="https://test.com/staging/4326/" tabindex="0"><i class="fa fa-home" aria-hidden="true"></i></a></li>
...
</ul>
</div>
</ul>
</nav>
<!-- .primary-menu-wrapper -->
</div>
Image to show issue:
Try using this if it works #mega-menu-primary > li:first-child {}
I've edited this after another look at your code.
I've noticed your using the id selectorwhen you are looking for classes. The # looks for ids, but you want to look for classes, so use a . instead in your #media query
#media only screen and (max-width: 600px) {
.mega-menu-primary li.mega-menu-item:first-child{
padding-top:20px !important;
}
}
Use margin like so:
#media only screen and (max-width: 600px) {
#mega-menu-primary li.mega-menu-item:first-child{
margin-top:20px !important;
}
}
margin helps push the nav down.
I tried to hide a div with my sidebar with this method:
/* For mobile phones: */
#media (max-width: 576px) {
.sidebar {
display: none!important;
}
}
/* For tablets */
#media (max-width: 768px) {
.sidebar {
display: none!important;
}
}
The sidebar listens to these rules but it seems like the content is disappearing but the <div> is actually staying. It might be like this because <div> with the sidebar is actually a component. But then I don't know how to solve it.
My page:
<template>
<div>
<sidebar />
<main-content/>
</div>
</template>
The sidebar component:
<template>
<div class="sidebar">
<div class="sidebar-header">
<div class="logo"><img src="../../../components/img/logo.svg"/></div>
System
</div>
<ul class="sidebar-nav">
<!--<li>Home</li>-->
<!--<li>Popular</li>-->
<!--<li>News and events</li>-->
<!--<li>Pages</li>-->
<li class="nav-item">
<img class="nav-icon" src="../../../components/img/users.svg" />Users
<ul>
<li class="nav-item">Import</li>
<li class="nav-item">Invitation</li>
</ul>
</li>
<!--<li>Organisation</li>-->
<li class="nav-item">
<img class="nav-icon" src="../../../components/img/polls.svg" />Poll
</li>
</ul>
</div>
</template>
Most probably your component styles are scoped. See the documentation how it works.
A posible solution is to move the style block to the component itself:
<template>
<div class="sidebar">
<div class="sidebar-header">
<div class="logo"><img src="../../../components/img/logo.svg"/></div>
System
</div>
<ul class="sidebar-nav">
<li class="nav-item">
<img class="nav-icon" src="../../../components/img/users.svg" />Users
<ul>
<li class="nav-item">Import</li>
<li class="nav-item">Invitation</li>
</ul>
</li>
<li class="nav-item">
<img class="nav-icon" src="../../../components/img/polls.svg" />Poll
</li>
</ul>
</div>
</template>
<style scoped>
/* For mobile phones: */
#media (max-width: 576px) {
.sidebar {
display: none !important;
}
}
/* For tablets */
#media (max-width: 768px) {
.sidebar {
display: none !important;
}
}
</stlyle>
Another solution is to declare a non scoped style block, this usually goes in your App.vue file.
The problem was in CSS for a container with main content. It had left margin, so when the sidebar disappeared, it stayed at the same place, not taking the width of the removed sidebar.
I'm trying to use media queries to change the text links in a navbar to icon font characters on smaller screens utilising display:none but it's not working as I'm currently using it.
I'm also using Font Awesome's icon fonts using the classes fa fa-home etc
.firstnav {
display: inline;
}
.secondnav {
display: none;
}
#media only screen and (max-width: 630px) {
.firstnav {
display: none;
}
.secondnav {
display: inline;
}
}
<nav class="topnav" id="myTopnav">
<a href="#home">
<p class="firstnav">Rob Hern</p>
<p class="secondnav poppins">RH</p>
</a>
<a href="#home">
<p class="firstnav">Home</p>
<p class="secondnav fa fa-home"></p>
</a>
<a href="#portfolio">
<p class="firstnav">Portfolio</p>
<p class="secondnav fa fa-code"></p>
</a>
<a href="#contact">
<p class="firstnav">Contact</p>
<p class="secondnav fa fa-envelope-o"></p>
</a>
<a href="#about">
<p class="firstnav">About</p>
<p class="secondnav fa fa-user"></p>
</a>
</nav>
Viewing as:
Full size screen
With media query size screen
Thank you!
Add one more condition
.secondnav.fa{ display:none}
#media only screen and (max-width: 630px) {
.secondnav.fa {
display: inline;
}
}
Because font-awesome icons are display:inline-block by default so you have to overwrite them as you are using them directly with your p tags .secondnav class.
Below is a working snippet .
.firstnav {
display: inline;
}
.secondnav {
display: none;
}
.secondnav.fa {
display: none;
}
#media only screen and (max-width: 630px) {
.firstnav {
display: none;
}
.secondnav {
display: inline;
}
.secondnav.fa {
display: inline;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="topnav" id="myTopnav">
<a href="#home">
<p class="firstnav">Rob Hern</p>
<p class="secondnav poppins">RH</p>
</a>
<a href="#home">
<p class="firstnav">Home</p>
<p class="secondnav fa fa-home"></p>
</a>
<a href="#portfolio">
<p class="firstnav">Portfolio</p>
<p class="secondnav fa fa-code"></p>
</a>
<a href="#contact">
<p class="firstnav">Contact</p>
<p class="secondnav fa fa-envelope-o"></p>
</a>
<a href="#about">
<p class="firstnav">About</p>
<p class="secondnav fa fa-user"></p>
</a>
</nav>
Have you tried to use inline-block?
Your code works fine. You can see it here. Play with the vertical handler. And you'll see it works.
Note : Have you tried clearing your browser's cache?
I've been trying to get my site's navbar-brand text to be responsive: I want it to get smaller as the screen is resized. Right now, what happens is that my brand text won't change size on mobile. This creates an ugly stacking of the navbar links over the navbar-brand. I've tried putting
#media (max-width: 400px) {
.navbar-brand {
font-size: 14px;
}
}
in my CSS, but to no avail. Is there something simple that I'm missing?
Here's a screenshot, to show you what I mean:
Medium-sized screens
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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.html">Sample Company Law Group, Inc.</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Attorneys
</li>
<li>
Practice Areas
</li>
<li>
References
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
https://jsfiddle.net/frzbpkjk/
First, I tested your css and it works. You can see an example working on this link:
http://codepen.io/eMineiro/pen/Kzjymp
<div class="navbar-brand">
<p>Test</p>
</div>
1) The problem could be on your css code. Check if you have another "font-size" that may be overloading your code.
2) The most easily way to see what is happening is to open you browser developer tools and check what style browser is calling when your media screen is less than 400px
Any example below could override your code:
/* Any media with max-width greater than 400px could override your code */
#media (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code */
#media (min-width: 200px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with max-width greater than 400px could override your code */
#media (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code and max-width greater than 400px */
#media (min-width: 200px) and (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}