I have seen a number of websites where, if I connect from a mobile device, the navigation bar automatically changes to a drop-down menu. This prevents the navigation bar being displayed too small, or off he side of the screen, or on two rows instead of one.
Now, the drop-down menu always seems to be a button with three horizontal lines on it, and feels very consistent across diffferent websites with this feature. For this reason, I'm wondering whether this is some built-in feature in CSS which automatically converts the navigation at into a drop-down menu, when appropriate. If so, could somebody point me towards info on how I might be able to incorporate this into my own website?
Thanks.
you have add media query for this
HTML
<img class="show-menu" src="http://localhost/wp-content/themes/themename/images/menu.png" alt="">
<nav class="main-nav">
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li >menu1</li>
<li><a href="#>menu1</a></li>
<li >menu1</li>
<li>menu1</li>
<li>menu1</li>
<li >menu1</li>
</ul></div>
</nav>
Media Query CSS
#media(max-width:640px){
.show-menu {
display: block;
}
.main-nav {
left: 0;
padding-top: 15px;
position: absolute;
top: 10px;
width: 100%;
}
.menu-primary-menu-container {
display: none;
}
.main-nav:hover .menu-primary-menu-container {
display: block;
}
}
#media(min-width:641px){
.show-menu {
display: none;
}
}
It is call "habmubrger menu".
It is combination of CSS and JS.
You can find it http://getbootstrap.com/ .
Or you can build it yourself. It is simple
Also check media queries
Related
I have already designed a webpage before learning about mobile-first design.
When creating a responsive design I made 3 classes: .mobile, .tablet, .desktop.
I call to all these classes in my navigation bar, but apparently don't need to call to my mobile query when designing for mobile first (I understand why). Whenever I remove my .mobile class it shows the mobile information, and then when I re-size the window to a larger window the mobile information stays and then the tablet/desktop information is added. How would I go about correctly re-designing this?
This is my main content in working form when resizing windows.
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: block;
}
.desktop,
.tablet {
display: none;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: block;
}
.mobile,
.desktop {
display: none;
}
}
/*Desktop Query*/
#media only screen and (min-width: 769px) {
.desktop {
display: block;
}
.mobile,
.tablet {
display: none;
}
}
<h2 class="mobile">About Me</h2>
<p class="mobile">I will not disappoint and I will perform to the best of my ability.</p>
<h2 class="tablet">About Me</h2>
<p class="tablet"> I am somebody who tries their best not to disappoint. I fear that my disappointment will reflect poorly upon myself and people who are close to me. This is something that motivates me to work hard and not to complain. Currently, I work part-time at a
grocery store, run a side business, and go to school more than full time.</p>
</article>
<h2 class="desktop">Strengths</h2>
<p class="desktop">One of my strengths include being very talented at learning or developing new ways to complete objectives. I always enjoy learning about different perspectives, and I believe it is needed to be successful. Another one of my strengths is the ability to
see an error and immediately want to correct it rather than ignoring it and leaving somebody else to fix it. I am driven to be the best at anything I do while wanting to help other people and make their jobs easier.</p>
So I've managed to answer half of my question so far. In the beginning I had for my Nav bar:
<nav>
<div class= "mobile">
<li>Home</li>
<li>About Me</li>
<li>My Projects</li>
<li>Contact Me</li>
<li>My Education</li>
</div>
<div class="tablet">
<li>Home</li>
<li>About Me</li>
<li>My Projects</li>
<li>Contact Me</li>
<li>My Education</li>
</div>
<div class="desktop">
<ul>Home</ul>
<ul>About Me</ul>
<ul>My Projects</ul>
<ul>Contact Me</ul>
<ul>My Education</ul>
</div>
</nav>
and it is now:
<nav>
<li>Home</li>
<li>About Me</li>
<li>My Projects</li>
<li>Contact Me</li>
<li>My Education</li>
</nav>
Because I changed my .desktop query
/*Desktop Query*/
#media only screen and (min-width: 769px) {
.desktop {
display: block;
}
.mobile, .tablet {
display: none;
}
nav li {
background-color: #FFA500;
border-radius: 1em;
list-style-type: none;
padding-left: .3em;
padding-right: .3em;
margin-left: 1%;
margin-right: 1%;
display: inline;
margin-bottom: 2em;
font-size: 1.2em;
}
}
My mobile and tablet information were the same in this case, with the only changes coming to this section being visual changes, so I changed my desktop query to include the visual changes instead of using li for one set of changes and ul for another.
For hiding content and displaying content, I kept the classes and removed my mobile query. I still retained the .mobile class. I added display: none to both my tablet/desktop classes so that they will never be displayed, but then with my tablet/desktop query, it has display: block, so it blocks the none display revealing them depending on viewport size.
Example: If my screensize is 500 pixels, it will classify as a desktop viewport, so my query tells my HTML to hide my .mobile and .tablet class, which tablet class is already hidden. It also tells my HTML to block the previos display command to my .desktop class, which was to hide it, so it ends up showing it.
I hope this is even interpretable.
my objective:
In desktop view the "Select Province" menu should disappear.
And then reappear in Mobile View.
there are two of these. One is a select statement that appears in desktop view. the other is an <li> drop down that will appear in mobile
I am using a custom css + bootstrap. I placed the affected section in a block quote to better understand where my issue is.
I am using mobiletest.me to test for mobile environment.
What works:
In mobile view it drops down to the mobile nav.
If i used <section class="province-btn-remove"></section> it works and hides in desktop view--but messes up the styling.
What doesn't work:
the Dropdown menu that appears under the nav in desktop view, shouldn't be there, should be hidden.
The HTML code:
<nav>
<div>
<ul class="nav navbar-nav">
<li class="left">Home</li>
<li class="left">Register</li>
<li class="left">Find a Fundraiser</li>
<li class="left">Learn More</li>
<li class="right">DONATE</li>
<li class="provinces-btn-remove">
<li title="Select Province">
<li class="provinces-btn">
<a class="dropdown-toggle" data-toggle="dropdown">Select Province<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alberta</li>
<li>British Columbia</li>
<li>Ontario</li>
<li>Nunavut</li>
<li>Manitoba</li>
</ul>
</li>
</li>
</li>
</ul>
</div>
</nav>
My CSS code:
#media screen and (min-width: 769px){
.provinces-btn-remove{
visibility: hidden;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
#media screen and (max-width: 768px) {
.provinces-btn {
width: 100%;
margin-top: 16px;
color: #FFFFFF !important;
background-color: #0066CC;
margin-left: 0px;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFFFFF !important;
background: #1975D1;
font-weight: 900;
}
}
#media screen and (max-width: 604px) {
.provinces-btn {
width: 100%;
margin-top: 16px;
color: #FFFFFF !important;
background-color: #0066CC;
margin-left: 15px;
}
}
If you're wondering why I am not just taking the select statement and place it into mobile view is because 1. I don't know how, and 2. I can't style the select statement to match the mobile view navigation. I asked about that in a previous question that remains unanswered.
Thanks for your time!
Your CSS (functionally speaking) is written correctly - but the HTML rendered via your link, is not in the same hierarchy as the HTML you pasted above.
You are attempting visibility: hidden on the .provinces-btn-remove class, but as seen in my screenshot below, it is a sibling to the dropdown, and not wrapping the dropdown.
And a side note, keep your breakpoints at 767px/768px, and not 768px/769px. Bootstrap breaks at the former. You will have 1px problems as you're resizing, if you do not update yours to 767px/768px.
If I've understood your question correctly, you should simply have to change:
#media screen and (min-width: 769px){
.provinces-btn-remove{
visibility: hidden;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
to:
#media screen and (min-width: 769px){
.provinces-btn{
visibility: hidden;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
You seem to be targeting a class that has no content, rather than the button you intend
Even after Jimmy Amash answer is correct, if you are using Bootstrap you should use their helper classes for hiding or showing elements according to breakpoints, so using CSS Classes hidden-md hidden-lg would accomplish your desired result.
<li class="hidden-md hidden-lg">Won't show on desktop breakpoint medium and large </li>
The purpose of using a CSS Framework its using most of it classes to help maintain code, as if you change Bootstrap LESS (or SASS) variables to change breakpoints pixel width your code should retain behaviour and rewrite as less as possible.
See Responsive Utilities on Bootstrap Docs for more info about visibility helper classes.
I'm building a website layout and I'm trying to have a list of images with descriptions centered next to them, but I can't figure out how to get the paragraphs to move next to the images without the entire layout messing up. I've messed around with the float, clear, and display settings with no avail. I added a picture of my desired result
my HTML for this section looks like this currently:
<section>
<ul id="gallery">
<li>
<a href="GPA_Calc_Screen.png">
<img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
</a>
</li>
<li>
<p >
This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
</p>
</li>
<li>
<a href="Avengers_App_Screen.png">
<img src="Avengers_App_Screen.png" alt"">
</a>
</li>
<li>
<p>
Okay, who doesn't like The Avenegrs movie series? Huh? Well, yeah I guess you're right, but it doesn't matter because I love it! I made this app to
test out layout design, android intents, and a few other features. It's also
a great way to kill 4 minutes.
</p>
</li>
</ul>
</section>
and my CSS that goes with it looks like this currently:
#gallery {
margin: 0;
padding: 0;
list-style: none; /*Removes bullet points*/
}
#gallery li {
width: 45%;
margin: 2.5%;
background-color: #b3dbeb
color: #1d95c5;
}
.descriptions {
display: block;
}
.descriptions a {
float: left;
}
For each p tag just add a clearfix class and import bootstrap or any other framework with clearfix support or do as below
.p:before,
.p:after {
content:"";
display:table;
}
.p:after {
clear:both;
}
.p {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Try flex box on the parent of your two elements:
display: flex;
Or try float right on paragraph:
.description p {float:right}
Make sure to define widths first.
I'm a little new to web programming and have looked far and wide trying to fix this problem on my own but for the life of me I cannot figure it out, I greatly appreciate any and all help.
I'm basically making a navigation bar and I attempt to have it link to my other html pages but it's not working. I use the following code.
HTML
<header>
<div class="banner"> <!-- contains main banner and logo -->
<a href="index.html" id="logo">
<img src="images/newlogo.png" alt="blahblah">
</a>
</div>
<div id="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
border-top: 12px solid #9e2630;
width: 100%;
background: #fff;
left: 0;
top: 0;
z-index: 200;
height: 115px;
margin-bottom: 130px;
}
header #logo img {
padding-top: 35px;
display: block;
margin-left: auto;
margin-right: auto;
}
header ul {
float: left;
position:relative;
left:50%;
min-height: 60px;
margin-top: 30px;
}
header ul li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position:relative;
left:-50%;
/*height: 45px;*/
}
header ul li a {
font: normal normal normal 18px/20px 'Century Gothic', sans-serif;
text-align: center;
color: #9e2630;
/*height: 43px;*/
}
header .nav li a:hover{
background-color: #9e2630; color:#FFFFFF;
}
header ul li a.current{
background-color: #9e2630; color:#FFFFFF;
}
The link in the logo works fine. The link in the contact also work fine, there's no problem when I link to an element on the page. The other four links do not work. I've also tried setting the href to an "http" address but that didn't work either. I've run all of these tests in DreamWeaver's browser preview function (IE and Chrome) as well as on a remote server with no difference in results.
I also noticed the z-index in the header is set to 200 (this is sample code I'm working with) which I understand plays a role in how elements are layered. I tried fiddling with that to no avail. What do you guys think?
Edit1: here's what my file structure looks like
file structure
Also here's the template I've been using
template
Edit2: Ok guys I found the problem was a JS file called jquery.singlePageNav.min.js
unfortunately when I disable this file I lose the nice image slider I had on my web page but the links work again, so now I have to fix that :p
Thanks for your help everybody!
From the plugin's documentation, by default it will override all links, which is clearly not what you want here. However there is a filter option which can override this behavior:
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
Therefore I suggest adding a class to all the links you don't want to be single-page-nav-ized, then initializing with the filter option:
HTML
<header>
<div class="banner"> <!-- contains main banner and logo -->
<a href="index.html" id="logo">
<img src="images/newlogo.png" alt="blahblah">
</a>
</div>
<div id="nav-bar">
<ul class="nav">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
JavaScript
$(document).singlePageNav({filter: ':not(.external)'});
Give proper path to your pages
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
be sure that all your .html pages in the correct folder. As for now you are linking to html pages in the same folder, so if you dont have them there , you wont be able to open them like this. you have to navigate to the other links from your index.html. Ill explain: if you have a folder "sites" and you have all your .html documents there, it should work the way you did. BUT if in your folder "sites" you only have your index.html and the other sites are in a subfolder "sub-sites" you will have to navigate there first. As posted in answer no. 1
I'm trying to create a sidebar with links on a wordpress page.
Screenshot:
http://imgur.com/CgVJTS8
HTML for sidebar:
<div class="right">
<ul style="list-style-type:none;">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
CSS:
.right{ position: absolute; top: 400px; right:980px; bottom: 80px;}
Basically it just doesn't treat the links as links. It's like the element is disabled. All I can do is see the element. I think it's behind something...not sure. I've played around with th eposition and I can get it to work if I make it relative but then it messes up the location of the sidebar.
Also: I know there are more effective ways of doing this, but I am a student with restricted access to the admin panel of this wordpress site so I'm just trying to do what I can with what I can.
Thank you for any advice/wisdom!
UPDATE: Works in IE just not Chrome...wtf
"I think it's behind something...not sure"
Try to add z-index: 1000; (or higher) and width: 400px;.
z-index will move the absolute element on top of other elements. Sort of like layers.
Example
.right {
z-index: 1000;
width: 400px;
}