I'm building a website for a friend's film production company using Foundation 6. I created a top-bar navigation bar with his logo image above the top-bar and made them both sticky. It seems to work fine on large screens and small screens but if viewed on anything in between the logo separates from the top-bar. This is most evident when you stretch and squish the page.
I've tried to include the image in the top-bar div but it aligns it to the left and I haven't been able to align it to the top as it is currently. This is the first time I've worked with the sticky function in Foundation. I've looked through the Foundation docs, Google, and StackOverflow but haven't found anything quite like this.
This is my top-bar section.
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li>Home</li>
<li>Current News</li>
<li>Film/Media</li>
<li>Photography</li>
<li>Publicity</li>
<li>Misc</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I would like the logo image and the navigation bar to look the way they do at larger screen sizes but minimize together to the point where the data-toggle kicks in instead of separating, as they are doing currently.
Related
When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.
I was doing the tutorial here: https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6 and was trying the stretch here:
https://codepen.io/chrisoncode/pen/wMWEVE
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">space</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
body { padding-top:50px; }
.row { border:1px solid #FF556C; margin-bottom:20px; }
.columns { background:#048CB9; color:#FFF; padding:20px; }
.columns:first-child { background:#085A78;vertical-align:bottom }
.columns:last-child { background:#B3BBBB; }
On the 3rd example, using the stretch property, I am trying to get the text to vertically align middle and am having no luck. Can anyone tell me how to do it?
I tried adding .columns:first-child { background:#085A78;vertical-align:bottom } but that did not work.
HTML:
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">
<div class="row align-center text-center"><p>space</p></div>
</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
CSS:
div.row.align-stretch.text-center .columns {
display: flex;
justify-content: center;
align-items: center;
}
div.row.align-stretch.text-center .columns p {
margin: 0;
}
Flex children are equal height by default, unless you assign an align-items value other than stretch.
Therefor:
<div class="row align-stretch text-center">
Is the same as:
<div class="row text-center">
For your example, the simplest way is to use the .align-middle which will make the column the height of the content within and vertically center it to the taller column in the group.
Otherwise, you can make the column itself display: flex; and add align-items: center;
I have a very simple code with Foundation CSS
<div class="row">
<div class="large-offset-1 large-6 columns">Content goes here</div>
<div class="large-4 end columns">Side goes here</div>
</div>
I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.
Doesn't Foundation provide a solution for this?
try this (it makes a full width div inside the other, automatically adding margins)
<div class="large-4 medium-6 small-12 columns">
<div class="large-24 columns">
... content ...
</div>
</div>
You could try this:
<div class="row">
<div class="large-offset-1 large-6 columns padded-column">
<div class="column-content">Content goes here.</div>
</div>
<div class="large-4 end columns padded-column">
<div class="column-content">Side goes here</div>
</div>
</div>
Then, for styles:
.padded-column {
padding: 10px;
}
.column-content {
background: red;
}
I had a similar issue that couldn't be resolved with padding. Since Foundation 5 isn't IE8 compatible, I just used calc eg. width: calc(50% - 10px);
My questions is a common problem i seem to encounter but my brain never registers the right answer for some reason, probably because i'm slow.
The question I have is regarding my navigation menu.
When i'm at full width in Foundation i use the large-12 class and the small-12 class for smaller viewports, however i have that nav div inside of another parent div so when i get to small viewport the navigation drops below the height of the parent div.
I've set the parent div to a min-height: 204px and a max-height: auto assuming that it will adjust in height to wrapping child elements but i doesn't work.
So what is the best way to ensure that child divs that grow in height due to smaller viewports will push the parent div in height as well?
Here is my html:
<div>
<div class="interior-header">
<div>
<nav class="utility">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
<div>
<nav class="main">
<div class="logo small-12 large-offset-1 large-5 columns left"></div>
<ul class="small-12 large-6 columns right">
<li>Home</li>
<li>Catalog</li>
<li>Learn More</li>
<li>Be a Broker</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
and here is the css for this particular component:
// HEADER INTERIOR
.interior-header {
background: url('../img/hero.jpg');
background-size: cover;
background-repeat: no-repeat;
min-height: 174px;
max-height: auto;
}
// NAVIGATION FIRST TIER
nav.main {
margin-top: 2%;
min-height: 100px;
height: auto;
}
Any help would be awesome, thank you.
.main {overflow: hidden;}
This causes a block-level element to contain its descendants.
I'm currently using Cycle2 with scrollHorz on full screen (100% width and height) with background images with their size to 'cover', besides that there are no callbacks or much else on the page so its a very basic slider.
I find that when the browser is too big, the slide transition appears jagged, not smooth. However its somewhat better when the screen is smaller. I also do not experience any issues with 'fade', or at least its not noticeable at all.
I have tried with various combination of easing and speed, but haven't had much luck.
I'm not sure if its a css thing or a cycle2 thing, and I'm unable to find a similar issue via google, can someone please shed some light to this?
HTML
<ul id="homepage-carousel" class="hero">
<li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
</ul>
CSS
#homepage-carousel {
width: 100%;
height: 100%;
.homepage-carousel-item {
height: 100%;
background-repeat: none;
background-position: top center;
background-size: cover;
}
}
This isn't a cycle issue
background-size: cover just has horrible performance.
You can ease the pain some by adding transform: translate3d(0,0,0) to the slides as well, but it will still be choppy.
Replacing the background with an actual image normally increases the performance for me, like this fiddle. Though, the larger the image is the slower the performance will be in any browser; rendering large moving images is hard for them.
Then it's just a matter of sizing and positioning the images, for that you could use something like:
.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
/*img size*/
min-width:100%;
min-height:100%;
width:auto;
height:auto;
/*img pos*/
top:50%;
left:50%;
transform:translate(-50%,-50%);/*offset position based on img size*/
}
If you need to support legacy browsers, then you would run a routine through the images to size and offset like this does.
There are other solutions that only work in certain browsers (like object-fit: cover), but these options should work in all browsers.