I am having issues with my navigation collapsing into the body of my site and I would prefer it to remain fixed when the browser window is re-sized. I have tried adjusting the min/max-widths of the bootstrapresponsive.css but it still seems to disappear into the body. Any help would be amazing. Cheers! I have posted the code below:
<div class="navbar" style="padding-bottom:0px;">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div id="logo"><img src="images/CoHlogo.jpg" class="logoImage";></div>
<div class="nav-right">
<!--Social Networking-->
<a class="socialNav" href="mailto:info#classroomofhope.org?subject=Website Inquiry"><img src="img/social/mail.png"/></a>
<a class="socialNav" href="http://www.youtube.com/user/Classroomofhope" target="_blank"><img src="img/social/youtube.png"/></a>
<!-- Twitter
<a class="socialNav" href="https://twitter.com" target="_blank"><img src="img/social/twitter.png"/></a> -->
<a class="socialNav" href="https://facebook.com/ClassroomOfHope" target="_blank"><img src="img/social/facebook.png"/></a>
<!--Google plus
<a class="socialNav" href="https://google.com" target="_blank"><img src="img/social/googleplus.png"/></a> -->
<!--Donate Button -->
<img src="img/donate_header.png" class="donateImage";>
</div>
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li class="dropdown" id="about">ABOUT US
<ul class="dropdown-menu">
<li id="values">OUR VALUES</li>
<li id="journey">OUR JOURNEY SO FAR</li>
<li id="founder">MEET THE FOUNDER</li>
</ul>
</li>
<li id="education">WHY EDUCATION?</li>
<li id="projects">PROJECTS</li>
<!--<li id="media">MEDIA CENTER</li>-->
<li id="donate">DONATE</li>
<li id="contact">CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Removal of the class .nav-collapse from one of the <div> elements solves this problem. As the name of the class suggests, an element with this class will become hidden on smaller screen sizes (I think below widths of 979px is what the stylesheet says?), by receiving height:0 and overflow:hidden via media query.
Here's a JSFiddle (with externally-loaded Bootstrap CSS) that demonstrates how layout would appear without this class. Try resizing the Result pane to see how it would look at different screen sizes.
I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
(Edit:) On taking a look at your live environment, I can now see that when you say "collapse", you mean the navigation links break to a new line as the parent element becomes too small. This is standard behaviour for floated elements. To stop this from happening, you can try applying min-width:1200px or something to that effect to the .container element (inside of .navbar-fixed-top). Hope this helps!
Related
<header class="header header-home main-grid">
<div class="header-content">
<a class="logo-link" href="index.html">
<img src="logo.svg" alt="" class="logo">
</a>
<button aria-label="Open navigation" class="open-nav">☰</button>
<nav class="nav">
<button aria-label="Close navigation" class="close-nav">×</button>
<ul class="nav-list">
<li class="nav-item">
home
</li>
<li class="nav-item">
about us
</li>
<li class="nav-item">
contact
</li>
</ul>
</nav>
</div>
</header>
in this HTML - the main grid is on the header - than he creates another div header-content to hold the logo and navbar.
What I dont understand is how the children of header-content are still affected by the header parents main-grid.
Basically the way I'm reading this is that the div is a child to the header, and i thought that flexbox/grid only affected its direct children.
If the main-grid class is on the header - why is it still affecting the content of the div even though the content isnt a direct child to the main-grid?
Each parent will affect all of his children and all of his children's children, etc. In another word, if you know about inheritance, all of the nodes in HTML are inheriting the features of their parents by default.
You can overwrite a style or behavior of a child by specifying that in its own definition. For example, if the background of a parent is black, all of its children will have a black background unless you mention background-color:'white' in the definition of a child node.
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 want to place a image in a very specific place (top right of the NAV bar) and i have done that using postition:relative; (also tried absolute) and moving it accordingly.
when ever i crop the browser it will stay in the white space outside of the div wrapper i have.
so basically my image is not scaling with the div wrapper i have.
can anyone provide some tips? sorry for the noob question.
here is some code.
<div id ="Wrapper">
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a> </li>
<li class='has-sub'><a href='#'><span>Product 2</span></a> </li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
<img src="images/register.jpg" width="50px" height="45px" id="register"/>
</div><!-- end of css -->
Wrapper div is at the bottom.
the css for the "register" id is just positioning coordinates
The nav bar is a template i downloaded.
Based on the CSS you provided in your comment, the reason it is doing this is because you are using pixels to set width. If you use a percentage, your image will shift to the screen size. So if you want it at the very right side of your container, try: left: 99%; or change the percentage value to place it where you need it to be.
ok simple try this.
<html>
<head>
<style>
h3 {
word-spacing: 100px;
}
</style>
</head>
<body>
<!-- make sure you put it in the heading tag of nav bar right allign-->
<hr>
<h3>
Example
Example
Example
Example
<!--Put Image below here-->
<img src="IMAGE.jpg">
</h3>
<hr>
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'm having problems trying to align an image with a header inside a navigation menu. Ideally, everything should be align at the bottom. I have created a jsfiddle to reproduce the issue:
http://jsfiddle.net/graphicsxp/j2t9R/
<nav style="float: left">
<ul class="menu">
<li>
<a href="index.html" class="logo">
<img src="img/logo.png" alt="" class="brand logo_def" width="125" height="39" /></a>
</li>
<li>
<h4 >Sam</h4>
</li>
</ul>
<div class="clear"></div>
</nav>
<nav>
<ul class="menu">
<li class="current-menu-parent">ACCUEIL
</li>
<li>PAGES
</li>
</ul>
<!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
as is:
to be:
I solved the problem using your code, and honestly I couldn't tell you what I changed because there is way to much code going on for such a simple task. Here it is anyway
I also took the liberty of making a new one, showing how simple your code could look
Simple, clean, easy to read. All done with one <div>, and an unordered list.
Simplifying your code and making it easy to read should be a primary goal in coding no matter what, but it also helps users answer your questions quicker, easier, and better help you with questions you have.
Temp fix can be as:
add css for h4 element.... better to give id and then add.
I have seen your fiddle, please put below code in your css
h4{
margin-top:150px;
}
or
(Give id=hompageheaderUserName to h4 of sam)
h4#hompageheaderUserName
{
margin-top:150px;
}
Change width a/c to your need.
Screenshot from fiddle: