I am utilizing w3schools' HTML5 and CSS to re-design our organization's public website. I currently have a logo in the center with I would like to have the bottom aligned with the bottom of the gray navbar. I also am having an issue displaying the font awesome 5 menu bars when the site is displayed in responsive mode (smaller than 1000px wide). I am not sure which CSS rules to apply to make this all work...
JSFiddle Initial
UPDATE 1
I was able to produce what I would like by adding a height to the col with the logos in it and setting positioning on the large logo. If there is a better way to do this please advise.
No, I just need help getting the bars to show up when the screen size is smaller than 1000px.
JSFiddle with Update 1
<!DOCTYPE html> <html> <title></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=Gugi|Lato|Raleway|Roboto|Roboto+Condensed"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> <style> body { /* font-family: 'Gugi', cursive; */ font-family: 'Roboto', sans-serif; /* font-family: 'Roboto Condensed', sans-serif; */ /* font-family: 'Lato', sans-serif; */ /* font-family: 'Raleway', sans-serif; */ /* font-family: palatino, helvetica, sans-serif; */ /* font-family: "Segoe UI", Arial, sans-serif; */ background: #C6CCD0!important; } .w3-content { max-width: 1200px; } #banner { background-color: #022a3a; } ul.breadcrumb { padding: 2.5px 4px; list-style: none; background-color: transparent; display: inline-block; line-height: 0.85; } ul.breadcrumb li { display: inline; font-size: 10px; } ul.breadcrumb li+li::before { padding: 4px; color: #fffef9; /* content: "/\00a0"; */ content: ">"; } ul.breadcrumb li a { color: #fffef9; text-decoration: none; } ul.breadcrumb li a:hover { color: #e8b00f; font-weight: 900; text-decoration: underline; } ul.social { padding: 5px 8px; list-style: none; background-color: transparent; } ul.social li { color: #fffef9; display: inline; font-size: 16px; } ul.social li+li::before { padding: 4px; color: #fffef9; /* content: "/\00a0"; */ } ul.social li a { color: #fffef9; text-decoration: none; } ul.social li a:hover { color: #e8b00f; text-decoration: underline; } #logo { float: left; margin: 0 0 0 25px; } .gbl-logo { display: inline-block; height: 78px; width: 180px; outline: none; background: transparent url("http://www.navy.mil/imgs/americas-navy-globe.png") no-repeat 0 0; cursor: pointer; /* text-indent: -9000px; */ text-indent: 100%; white-space: nowrap; overflow: hidden; } #___gcse_0 { float: right; width: 75%; } .gsc-control-cse { /* font-family: Arial, sans-serif; */ border-color: #022a3a!important; background-color: #022a3a!important; } .gsc-search-button-v2, .gsc-search-button-v2:focus { border-color: #C6CCD0!important; background-color: #0076a9!important; background-image: none; filter: none; } .gsc-search-button-v2:hover { border-color: #C6CCD0!important; background-color: #e8b00f!important; background-image: none; filter: none; } #navbar { height: 38.5px; } .loc-logo { width: 100px; /* height: 125px; */ /* position: absolute; */ /* bottom: 0; */ margin: 0 auto; display: block; } </style> <body> <!-- Start Banner and Navbar --> <div class="w3-top"> <div id="banner" class="w3-hide-small w3-hide-medium"> <div class="w3-content"> <div class="w3-row"> <div class="w3-col m8 l9"> <!-- Start Sit Collection Breadcrumbs --> <ul class="breadcrumb"> <li><a href="#">Commander, Naval Surface Force, U.S. Pacific Fleet (COMNAVSURFPAC)</a></li> <li><a href="#">Commander, Naval Surface Group, Western Pacific (COMNAVSURFGRUWP)</a></li> <li><a href="#">Commander, Amphibious Squadron ELEVEN (COMPHIBRON 11)</a></li> <li><a href="#">USS Ashland (LSD 48)</a></li> </ul> <!-- End Sit Collection Breadcrumbs --> </div> <div class="w3-col m4 l3"> <!-- Start Social Media Links --> <ul class="social"> <li>Follow Us On:</li> <li><a href="#" title="Follow Us On Facebook"><i class="fab fa-facebook-square"></i></a></li> <li><a href="#" title="Follow Us On Twitter"><i class="fab fa-twitter-square"></i></a></li> <li><a href="#" title="Follow Us On Flickr"><i class="fab fa-flickr"></i></a></li> <li><a href="#" title="Follow Us On Wordpress"><i class="fab fa-wordpress"></i></a></li> <li><a href="#" title="Follow Us On Youtube"><i class="fab fa-youtube-square"></i></a></li> </ul> <!-- End Social Media Links --> </div> </div> <div class="w3-row"> <!-- Start Site Logo --> <h1 id="logo"> <a class="gbl-logo" href="#" title="Commander, Naval Surface Force, U.S. Pacific Home Page"> <span>Commander, Naval Surface Force, U.S. Pacific Home Page</span> </a> </h1> <!-- Start Site Logo --> </div> </div> </div> <div class="w3-content"> <div id="navbar" class="w3-bar"> <div class="w3-row"> <div class="w3-col l5"> <!-- Start Global (Left) Navbar --> <div class="w3-left w3-hide-small w3-hide-medium"> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> </div> <!-- End Global (Left) Navbar --> </div> <div class="w3-col l2 s3 m6"> <a class="w3-hide-large w3-left" href="#home"> <img style="width: 30px; margin: 0 10px; display: block;" src="https://www.public.navy.mil/surfor/crests/ashland_med.gif" /> </a> <a class="w3-hide-small w3-hide-medium" href="#home"> <img style="width: 100px; margin: 0 auto; display: block;" src="https://www.public.navy.mil/surfor/crests/ashland_med.gif" /> </a> </div> <div class="w3-col l5"> <!-- Start Local (Right) Navbar --> <div class="w3-right w3-hide-small w3-hide-medium"> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> <a class="w3-bar-item w3-button" href="#about">ABOUT</a> </div> <!-- End Local (Right) Navbar --> </div> <div class="w3-col s1 m3"> <!-- Hide Navbars and Display Menu Icon --> <a class="w3-bar-item w3-button w3-right w3-hide-large" href="javascript:void(0)" onclick="w3_open()"> <i class="fa fa-bars"></i> </a> </div> </div> </div> </div> </div> </body> </html> 2 Answers
Answers 1
Basically your fa bars icon is rendering properly, but it is pushed down to the next line, outside of the navbar bounds.
To fix this, I did a couple things. First I moved all the hide-medium, hide-small and hide-large classes up to the column level. This keeps the entire column from rendering even when the content inside them is hidden. Second I moved the large icon and small icon into their own columns (again, so now we can hide the entire column instead of just part of it). Then I adjusted the column size for the small icon. All this allowed the menu icon to be rendered inside the bounds of the navbar.
https://jsfiddle.net/vquagfh1/27/
<div id="navbar" class="w3-bar"> <div class="w3-row"> <div class="w3-col l5"> ... </div> <div class="w3-col l1 s1 m1 w3-hide-large" style="height: 38.5px;"> ... </div> <div class="w3-col l2 s3 m6 w3-hide-small w3-hide-medium" style="height: 38.5px;"> ... </div> <div class="w3-col s1 m1 w3-hide-large"> <!-- Hide Navbars and Display Menu Icon --> <a class="w3-bar-item w3-button w3-right" href="javascript:void(0)" onclick="w3_open()"> <i class="fa fa-bars"></i> </a> </div> <div class="w3-col l5 w3-hide-small w3-hide-medium"> ... </div> </div> </div> Answers 2
Here is a very basic example using media queries, which as already mentioned, you should look into.
Fiddle: https://jsfiddle.net/ru1Lt8j3/1/
(Below is just for reference since you can't resize the SO embedded renderer)
.menu-item { display: inline-block; padding: 15px; } @media screen and (max-width: 500px) { .logo { float: left; width: 16px; height: 24px; } .somestuff { display: none; } }<div class="somestuff">this is some stuff</div> <div class="menu"> <div class="menu-item">Link</div> <div class="menu-item">Link</div> <div class="menu-item">Link</div> <img class="logo" src="http://via.placeholder.com/80x120"> <div class="menu-item">Link</div> <div class="menu-item">Link</div> <div class="menu-item">Link</div> </div>
0 comments:
Post a Comment