I have been working on a website recently that needs to have a header with the 4 menu items, and then the menu as the final header that expands for the 4 menu items. I'm attempting to make it so that when you have a device that won't fit the 4 menu items, it won't show them and will only show the menu.
HTML:
<!-- Header -->
<header id="header">
<div class="logo"><span>Placeholder</span></div>
About
Clients
Team
Contact
Menu
</header>
<!-- Nav -->
<nav id="menu">
<ul class="links">
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact
</ul>
</nav>
CSS:
#media screen and (max-width: 730px) {
a.optional {
display:none;
}
}
As you can see, I have tried using classes to select the specific links, but it doesn't work as intended. Thanks in advance for the help!
JSFiddle: https://jsfiddle.net/4c3cgeqx/
Related
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.
It seems that jsfiddle does not let me use multiple html pages so i cannot post both pages. The issue is when i click a link my nav, i notice the logo move a little to the right instead of staying in the same place. the second html page has the exact same html code and css so i don't know why the logo would move once i click a link.
<header>
<div class="header">
<h1 class="logo">New York</h1>
<nav class="main-navigation">
<ul>
<li class="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
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>
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.
I want my navigation menu to have 3 links on the left, the logo in the middle, and 3 more links to the right,
This is the first way I have tried:
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul>
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
Is this a good way?
Sorry I've never done this before so I just want to make sure I am doing it a good way
You need to float your menus and center header:
Html
<div id="header">
<ul class="left">
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul class="right">
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
</div>
Css
#header h1 { display:block; text-align:center; }
#header .left { float:left; }
#header .right { float:right; }
http://jsfiddle.net/Ub3cP/
That would be just fine. Then you would have to use the CSS float property to get everything in line.
It's OK, but there's a gotcha to watch out for. You describe it as a navigation menu, and so it is, and I'm assuming that the <h1> is a page header. Now, if you were making a HTML5 page, you'd want to mark your navigation menu appropriately with a <nav> element. So you might do this:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul>
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
The problem is that this changes the semantics of the <h1> element. It would then be the heading of the nav area, not the heading of the page.
To guard against this, it might be better to have the <h1> element either before or after the navigation menu in the markup, and move it into the display position between the two <ul>s with CSS.
For example: http://jsfiddle.net/mJELq/