<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-commenting"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
Hi, the above HTML gives the following arrangement of URL in Desktop View and Mobile View
I have used nav-justified class to justify the links in both desktop view and mobile view. While the desktop view is just fine (Three links appearing horizontally), In mobile view the 2nd link is slightly misaligned (links have to appear vertically). Is there a cleaner way to align the links in mobile view?
answer updated
you can now individually give margin-right to your second link #PgmDetails
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<style>
#PgmDetails { margin-right: 22px; } <!-- as per your need-->
</style>
</head>
<body>
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-comments"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-md-12">
some text
</div>
</div>
</div>
Try like that ?
I think glyphicon used extra padding or margin in your code.
just update
<i class="glyphicon glyphicon-list-alt ml-0 pl-0" aria-hidden="true"></i>
or you can inspect element so that you can see where is that extra padding
I think your using Bootstrap. We can use flex-column class Reference link
Related
Why does my top navbar on this page wrap before and after the "Landscaping" menu option?
I'm taking W3.CSS out for a test drive and am finding it a fairly satisfactory experience so far. I've produced a skeleton website rather quickly and find it clearer and more concise than I'm used to getting when I don't use W3.CSS.
The skeleton is working reasonably well aside from the strange split around the Landscaping option. See the page here.
I can't see anything in my code that would seem likely to cause these breaks. Or maybe I should say my debugging skills with Devtools are not quite sufficient to know how to track this problem down.
Can anyone help me figure out what's wrong?
.w3-block {
display: inline-block !important;
width: auto !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aux02 - About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="javascript/all.js"></script>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card" id="myNavbar">
Auxsable
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<i class="fa fa-home"></i> HOME
<i class="fa fa-mobile-alt"></i> CONTACT US
<a onclick="myAccFuncTop()" href="javascript:void(0)" class="w3-button w3-block w3-white" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i></a>
<div id="demoAccTop" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> FORESTRY
<i class="fa fa-user"></i> ABOUT US
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div><!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
Close <i class="fas fa-times-circle"></i>
<i class="fa fa-home"></i> Home
<i class="fa fa-mobile-alt"></i> Contact Us
<!-- Landscaping -->
<a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-white w3-left-align" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> Forestry
<i class="fa fa-user"></i> About Us
</nav>
<div class="w3-auto">
<div class="w3-container w3-padding">
<br><br><br>
<h1>About Us</h1>
<p>J<del>xxxxxx</del> S<del>xxxxxxx</del> is a Registered Professional Forester and graduate of the
Honours Bachelor of Science in Forestry program at Lakehead University in Thunder Bay.</p>
<p>J<del>xxxxxx</del> has extensive experience in silviculture and site rehabilitation. Along with
landowners, J<del>xxxxxx</del> writes woodlot management plans and tree marking prescriptions that
focus on each customer's needs and desires for their woodland area.</p>
<p>Combining her skills of forest management and silviculture, she adds a little flair and generates
unique and beautiful native plant landscape designs for the Carolinian Forest Region.</p>
</div>
<div class="w3-container w3-padding">
<div class="w3-panel w3-light-grey w3-large">
<p class="w3-medium w3-serif">
<i>Serving Lambton, Huron, Middlesex and Essex Counties</i></p>
</div>
</div>
</div><!-- w3-auto -->
<!-- Footer -->
<footer class="w3-center w3-blue-grey w3-padding">
<p><i class="far fa-copyright"></i> 2019</p>
</footer>
</body>
</html>
You can change two class like this
/* if you dont want to float right */
.w3-right {
/* float: right!important; */
}
.w3-block {
display: inline-block;
/* width: 100%; */
}
If you want to keep float right, only change css .w3-block to
.w3-block {
display: inline-block;
/* width: 100%; */
}
Above is the screen shot of the html structure of your menu.
You could use ul and li for the same menu and the sub menu items as well.
I do not know much about W3.css but your css has too many "!important", which is not at all recommended. Instead I would suggest you to re-work the structure, as the current one will not support the RWD.
<style>
.menu{
display:block;
text-decoration:none;
list-style:none;
/* width as per requirement; & other styling */
}
.menu > li{
position:relative; /* important to maintain the sub-menu item as local. */
display:inline-block;
/* width if needed */
}
.menu li a {
display:block;
width:100%;
/*padding as per the need*/
}
.menu .subMenu{
display:none;
position:absolute;
/* top as per the height of the .menu line-height or height */
left:0;
/* width: 100% or in em's */
}
.menu > li:hover .subMenu{
display:block;
}
.menu .subMenu li{
display:block;
width:100%;
}
</style>
<ul class="menu">
<li><span class="homeIcon"></span><span>Home</span></li>
<li><span class="contactusIcon"></span><span>Contact us</span></li>
<li><span class="forestryIcon"></span><span>forestry</span></li>
<li><span class="aboutusIcon"></span><span>About us</span></li>
<li>
<span class="landscapingIcon"></span><span>Landscaping</span>
<ul class="subMenu">
<li class="subMenuItem"><a href="#"item one</a></li>
<li class="subMenuItem"><a href="#"item two</a></li>
<li class="subMenuItem"><a href="#"item three</a></li>
</ul>
</li>
</ul>
I created a simple F6 app for sites and tried to copy-paste code snippets to display menu with icons. Why id doe not work neither in the topbar menu not in the off-canvas menu section? Here is the HTML code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FDashboard</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li><span>Three</span> <i class="fi-list"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="off-canvas-wrapper">
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
<!-- Menu -->
<ul class="vertical menu icons icon-left">
<li><i class="fi-list"></i> <span>One</span></li>
<li><i class="fi-list"></i> <span>Two</span></li>
<li><i class="fi-list"></i> <span>Three</span></li>
<li><i class="fi-list"></i> <span>Four</span></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Foundation</h1>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Adding the below lines to app.scss hasn't solved the problem:
#include menu-base;
#include menu-expand;
#include menu-align;
#include menu-direction($dir);
#include menu-icon-position;
#include menu-icons;
#include menu-icon-position;
What is wrong here ? Thank you!
I'm not sure it to be the best and the right solution. Anyway, it works fine. So if there is a better way, it is always welcome. The described steps were made for a F6 project created with Foundation CLI.
Download Foundation Icon Fonts 3
Unzip the downloaded archive and copy its entire content into [your-project]/css folder.
Delete preview.html file (useless as is used just to display available icons).
Reference the icons CSS file in your HTML page as follows <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />. You can put just underneath the generated during project creation <link rel="stylesheet" href="css/app.css"> line.
Use one of the icons font, for example:
<li><span>Three</span> <i class="fi-list"></i></li>
Enjoy :)
I am trying to make my h1 text not squished to the left. I am also using bootstrap so I'm not sure if that effects anything:
h1 {
margin: 5px 40px 10px 70px;
}
<html>
<head>
<script src="https://use.fontawesome.com/d712ea1844.js"></script>
<title>About Mike</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/a1.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">About Mike</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Resume</li>
<li>Artifact 1</li>
<li>Artifact 2</li>
</ul>
</div>
</div>
</nav>
<h1 id="annoyingtitle">Examples of Work</h1>
<p id="p0">This is an example of a paper I wrote while I attended Frankline Pierce University. In this paper I look at the lenses at which mental illness is viewed in different parts of the world.</p>
<br/>
<A id="mentallink" HREF="mentalillness.docx">Mental Illness Cultural Lenses and Barriers</A>
<br/>
<p id="p1"> Reflection: Writing this essay was easily one of my hardest assignments I have ever done. It involved levels of research that I hadn’t done before. I learned how to form an argument while drawing evidence from multiple sources. This has helped me in my research and writing skills. My favorite part of writing this paper was doing the research. On this assignment we were allowed to pull sources from almost anywhere as long as they were credible, I enjoyed being able to go as far as my mind could take me. The one risk I believe I took with this project was the structure and flow. The entire assignment was 9 pages long. This made my biggest problem getting it all to flow together and getting my ideas in the right order. If I could re-do this assignment I wish I would write a better conclusion to the paper. </p>
<br/>
<div id="annoying">
<ul id="list1" class="text-center list-unstyled">
<li class="col-md-4"> <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
<br>
#M
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
<br>
mike
</li>
<li class="col-md-3"> <i class="fa fa-lg fa-envelope" aria-hidden="true"></i>
<br>
email#email.com
</li>
</ul>
</div>
</body>
</html>
Your margin is working. You want your h1 not squished to the left? How about horizontally centered? (I usually put margin bottom on headers though)
h1 {
margin: 0 0 10px 0;
text-align: center;
}
Make sure you are saving the file, refreshing your browser, maybe clearing your cache, close your browser and re-open, do the same for your text editor, etc. Your code does work.
Make sure the local URL is correct in your browser, etc., or post your entire code. Try a different browser. There either has to be an element that doesn't have a closed tag, another CSS file that is overriding your h1 elements, or something that you have not posted that is conflicting with your styles.
My Bootstrap 3.3.0 navbar wraps into two rows, apparently when width is less than #screen-md, even though there is plenty of space between left and right for it to shrink/use. How can I change it so that it doesn't wrap prematurely?
I've seen several questions asking about how to change the breakpoint for collapsing into a single column. I'm not asking about that, as my collapse is set to #screen-sm and I'm fine with that.
Right before the wrap. I can even insert another element on the right and it causes no problem.
Right after:
Here's my HTML:
<header class="navbar navbar-default navbar-static-top bs-docs-nav" id="top" role="banner">
<form ...>
<div class="container">
<div class="navbar-header">
...
</div>
<nav id="mm-navbar" class="collapse navbar-collapse">
<!-- Free-text Search -->
<div class="text-search input-group">
<input id="search-input" type="text" class="form-control"
placeholder="Search" name="q" value="{{ query }}" />
<span class="input-group-btn">
...
</span>
</div><!-- /text search -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
...
</li>
<li>Calculate</li>
<li class="dropdown">
...
</li>
<li> <a id="login_button" href="{% url 'account_login' %}">Login</a> </li>
<li>
<span class="fa feedback-button fa-envelope" data-toggle="modal"
data-target="#feedback-modal" title="Send Feedback"></span>
</li>
<li>
<span class="help-button glyphicon help glyphicon-question-sign" data-toggle="modal"
data-target="#help-modal" title="Help"/>
</li>
</ul>
<!-- Advanced Search -->
<div class="collapse" id="advanced-search-bar">
{% include "search.html" %}
</div>
</nav>
</div>
</form>
</header>
This question seemed related but pull-left and pull-right did not work for me.
Note the wrap introduced at < 992px (moving from screen-md into screen-sm), is accompanied by a large amount of margin on either side of the broken navbars (pic 2 above). The problem is that this entire navbar is wrapped in .container, which at this breakpoint sets a fixed width which the navbar can no longer fit into.
The solution is to use a .container-fluid instead (or no container, although I'm not sure of the ramifications of that).
I cannot get to work the navbar collapse in Bootstrap 3.
My menu collapse nicely when I change screensize, only it won't show the menu when I press the button.
This is my code:
<header class="container">
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div id="logo">
<a href='..'><h3>Logo</h3></a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Contact
</li>
</ul>
</div>
</div>
</header>
Your HTML works fine, so make sure you are referencing the proper scripts and and styles in your markup
Make sure you have the following in your markup:
bootstrap.min.css
font-awesome.min.css
jquery.js
bootstrap.min.js
Fiddle Works Fine
Copy and paste this HTML:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
The issue is not in the HTML your code works perfect in this Fiddle
Check this fiddle
make sure you include the responsive css
http://getbootstrap.com/dist/css/bootstrap.css
and the correct JS
http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
I also suffered from the same problem, and could not find the solution anywhere. Actually bootstrap.min.js needs jquery to work. SO if you put script src=js/bootstrap.min.js before script src=js/jquery.js it will not work.
The Order of inclusion of jquery and bootstrap.min.js is important.