I have a navigation that worked fine when i didn't use any custom bottom border on the nav links, but trying to adding them and still have the functionality as before does my head in. I just want to vertical align the nav items with 50px height and a custom border on the menu links, but keep it functional when in mobile size and de border in mobile view is replaced with a normal underline declaration.
This what i had before adding a custom bottom border and it works:
--> Fiddle before
And this is what happens when adding a custom bottom border when in mobile size the menu items don't vertical align and the background doesn't go down with them:
--> Fiddle after
<header>
<nav>
<div class="mobile-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
Related
Poorly worded question I think, however, I'm working on some coursework just now, it's a very basic HTML website. I'm trying to overlay the logo and the navigation on my Hero image. The issue I'm facing is trying to get the white bg from the header div to be transparent or remove it completely and have the nav and logo at the top of the hero image.
Hope Below CSS might help you.
Add this CSS in your CSS file.
I have used absolute position to overlay the navbar. you can read more in detail about the positions in CSS - https://www.w3schools.com/cssref/pr_class_position.asp
header {
position: absolute;
}
The easiest way to do it is just move header section to hero section like that:
<div class="hero">
<a href="">
<h1 class="logo"><strong>FOTO.</strong></h1>
</a>
<header>
<nav>
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<span class="herotext">THE WILD THROUGH A LENSE</span>
</div>
Hello all I'm trying to add a logo to my navigation bar using HTML and CSS I have managed to get an image loaded on to my nav bar but it is way to big as seen in the picture.
<div class="nav">
<div class="container">
<ul class="pull-left">
<img src="images/test.png">
<li>Home</li>
<li>How to</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
<div class="clear"></div>
</div>
</div>
Well, there are several options.
First is to resize your image with any of editors like Photoshop and others.
Second is to set your image width and height via css:
.pull-left img {
display: block;
width: 30px; /* here put your width */
height: 30px; /* here put your height */
}
But if your logo image not going to scale to it's initial size according to your design and media queries, you should take the first approach. It will reduce file size as well.
I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
Here is the jsfiddle for it http://jsfiddle.net/8PcxE/
<div id="container">
<div id="header">
<div id="nav-container">
<ul id ="nav-list">
<li id=nav-title>lymbo</li>
<li>Playmaps</li>
<li>Map</li>
<li>About</li>
<li>My Account</li>
<li>Log Out</li>
</ul>
</div>
</div>
It is fine on a wider page, but when I run it on a small page everything is cramped and the options get pushed together making a zipper-like pattern.
My other problem is when I type something in my headers or paragraphs it will be at the top and intersecting with my navigation bar making it look like a mess.
My goal is to make a sort of "gradient" looking navigation bar hence the shadows. But that also doesn't seem to look right. If someone can give me some input on that, it would be much appreciated.
I found that after I changed my nav-container CSS to position: relative from position: fixed it works out. Are there any negative effects of doing this?
Since you've changed all the <li> to inline, the simplest solution would be to prevent wrapping on the <ul>:
#nav-list {
white-space: nowrap;
/* ... */
}
http://jsfiddle.net/mblase75/Lt72p/