Menu icon Foundation

My Posts


  • 1
    Reply
  • Drop down menu top link

    By Iain MacDonald

    dropdown menu

    If I have a drop down that looks like:   <li class="has-dropdown"> <a href="../news/">News and Offers</a> <ul class="dropdown"> <li><a href="/news_connected/">Your News</a></li> &lt... (continued)

    Last Reply by Rafi Benkual about 1 year ago



  • 4
    Replies
  • Topbar styling

    By Iain MacDonald

    topbarstyling

    Could anyone point me in the direction of a tutorial or codepen like this one: http://codepen.io/rafibomb/pen/PwzgVK?editors=110  To change or play around with the topper styling, but for Foundation 6? I've had a bit of a look on here and Google, ... (continued)

    Last Reply by Iain MacDonald over 1 year ago





  • 9
    Replies
  • Accordion not working

    By Iain MacDonald

    accordion

    Not sure what's up here - just a basic page to test out the accordion, but the other panels don't seem to open when I click on them. If anyone could let me know what I'm missing that would be much appreciated. Thank you. Page is here: http://w... (continued)

    Last Reply by Iain MacDonald almost 2 years ago




My Comments

Iain MacDonald commented on Iain MacDonald's post 9 months

I missed this from the main content HTML, above the footer:
<div class="row content_borderless content101">
Main content here...
</div>

Flex is a new one on me, but it seems to do the job here.

Iain MacDonald commented on Iain MacDonald's post 9 months

OK, think I have it this time, here:
http://www.safarilink.com/about/index805.php
CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.row {
width: 80%;
max-width: 1440px;
}
.content101 {
flex: 1;
}
.footer_style_1 {
background-color: #2A2A2A;
color:#FFFFFF;
height:200px;
}
.footer_left {
text-align: left;
}
.footer_right {
text-align: right;
}
 
HTML:
<footer class="footer footer_style_1">

<div class="row">
<div class="large-6 columns home_middle_borderless2 standardlinks footer_style_1 footer_left">
Footer left content here...
</div>
<div class="large-6 columns home_middle_borderless2 standardlinks footer_style_1 footer_right">
Footer right content here...
</div>
</div>

</footer>

</body>
 

Iain MacDonald commented on Iain MacDonald's post 9 months

Actually, I spoke to soon - it looked OK on my laptop where I was looking at it, but back at the office, I can see that the footer isn't sticking to the bottom of the page after all.
This one has your code:
http://www.safarilink.com/about/index902.php
But how can I get that footer, with the text in that position within the footer, to stick to the bottom of the page?

Iain MacDonald commented on Iain MacDonald's post 9 months

Thanks Val - think I've gotten there in the end. Its great that there are so many different ways to skin a cat with web design, but sometimes its a pain when different methods don't quite seem to do everything you wanted to.
In this case either the footer not sticking to the bottom, or the footer rising up over text, or the footer content not being in the right position within the footer.
The method that seems to be doing everything I needed was this one:
https://css-tricks.com/couple-takes-sticky-footer/
So the page here:
http://www.safarilink.com/about/index801.php
Has the CSS:
html, body {
height: 100%;
margin: 0;
}
.row {
width: 80%; //for example
max-width: 1440x;
}

footer {

bottom: 0;
padding-top:20px;
width: 100%;
height: 200px; /* choose any height */
background-color:#515050;
color:#FFFFFF;
}
.push {
height: 70px;
}
  And HTML:
<div class="push"></div>

<div id="footer">
<div class="row">
Footer content here
</div>
</div>

</body>
 
 

Iain MacDonald commented on Iain MacDonald's post 9 months

If anyone could help out with that that would be appreciated.
Thank you!

Iain MacDonald commented on Iain MacDonald's post 9 months

Thanks Tom - that certainly makes it simpler.
But looking at:
http://www.safarilink.com/about/index101.php
The text in the expanded row appears on the left, rather than in the centre.
I know I can centre the text in the middle of the page, but how can I align it to the left, so it aligns with the main content text on the page, like this:
http://www.safarilink.com/about/index102.php

Iain MacDonald commented on Iain MacDonald's post about 1 year

Thanks Remco

Iain MacDonald commented on Iain MacDonald's post over 1 year

Thanks Corey - I was almost there - I had specified the height for the menu, but not the li > a.
Appreciate you having a look.

Iain MacDonald commented on Iain MacDonald's post over 1 year

Thanks Corey.
I nearly have it here (excuse garish colours for testing!):
http://www.goodsafariguide.com/new2016/
To get that far I have changed the topbar padding to 0 so that the menu fills the height of the topbar.
It didn't quite, so I tried to force the issue by specifying a height in pixels for the topbar - which I probably don't need to do, probably shouldn't do, and doesn't quite line ups anyway.
If anyone could help me out with what I need to change to get that all lined up that would be much appreciated.
 
Thank you!

Iain MacDonald commented on Iain MacDonald's post over 1 year

Thanks Ryan - that's really helpful, and clears that up for me. Basically the paths are specified in the gulp.js file which Yeti references while it is watching the folder, so the app.css file only needs to reference the file name.
And it makes sense with leaving the stuff in /bower_components/ although when I was looking yesterday at styling a top_bar, I saw a post about how most of the top_bar settings were no longer in the _settings.scss file, but were now in a top_bar.scss file in /bower_components/foundation-sites/scss/components/
So I did edit that - although just changing $topbar-padding to 0.
With something like that I should probably create a new file custom_settings or similar and add it to my app.scss file. 

Posts Followed



Following

    No Content

Followers

My Posts







My Comments

You commented on Iain MacDonald's post 9 months

I missed this from the main content HTML, above the footer:
<div class="row content_borderless content101">
Main content here...
</div>

Flex is a new one on me, but it seems to do the job here.

You commented on Iain MacDonald's post 9 months

OK, think I have it this time, here:
http://www.safarilink.com/about/index805.php
CSS:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.row {
width: 80%;
max-width: 1440px;
}
.content101 {
flex: 1;
}
.footer_style_1 {
background-color: #2A2A2A;
color:#FFFFFF;
height:200px;
}
.footer_left {
text-align: left;
}
.footer_right {
text-align: right;
}
 
HTML:
<footer class="footer footer_style_1">

<div class="row">
<div class="large-6 columns home_middle_borderless2 standardlinks footer_style_1 footer_left">
Footer left content here...
</div>
<div class="large-6 columns home_middle_borderless2 standardlinks footer_style_1 footer_right">
Footer right content here...
</div>
</div>

</footer>

</body>
 

You commented on Iain MacDonald's post 9 months

Actually, I spoke to soon - it looked OK on my laptop where I was looking at it, but back at the office, I can see that the footer isn't sticking to the bottom of the page after all.
This one has your code:
http://www.safarilink.com/about/index902.php
But how can I get that footer, with the text in that position within the footer, to stick to the bottom of the page?

You commented on Iain MacDonald's post 9 months

Thanks Val - think I've gotten there in the end. Its great that there are so many different ways to skin a cat with web design, but sometimes its a pain when different methods don't quite seem to do everything you wanted to.
In this case either the footer not sticking to the bottom, or the footer rising up over text, or the footer content not being in the right position within the footer.
The method that seems to be doing everything I needed was this one:
https://css-tricks.com/couple-takes-sticky-footer/
So the page here:
http://www.safarilink.com/about/index801.php
Has the CSS:
html, body {
height: 100%;
margin: 0;
}
.row {
width: 80%; //for example
max-width: 1440x;
}

footer {

bottom: 0;
padding-top:20px;
width: 100%;
height: 200px; /* choose any height */
background-color:#515050;
color:#FFFFFF;
}
.push {
height: 70px;
}
  And HTML:
<div class="push"></div>

<div id="footer">
<div class="row">
Footer content here
</div>
</div>

</body>
 
 

You commented on Iain MacDonald's post 9 months

If anyone could help out with that that would be appreciated.
Thank you!

You commented on Iain MacDonald's post 9 months

Thanks Tom - that certainly makes it simpler.
But looking at:
http://www.safarilink.com/about/index101.php
The text in the expanded row appears on the left, rather than in the centre.
I know I can centre the text in the middle of the page, but how can I align it to the left, so it aligns with the main content text on the page, like this:
http://www.safarilink.com/about/index102.php

You commented on Iain MacDonald's post about 1 year

Thanks Remco

You commented on Iain MacDonald's post over 1 year

Thanks Corey - I was almost there - I had specified the height for the menu, but not the li > a.
Appreciate you having a look.

You commented on Iain MacDonald's post over 1 year

Thanks Corey.
I nearly have it here (excuse garish colours for testing!):
http://www.goodsafariguide.com/new2016/
To get that far I have changed the topbar padding to 0 so that the menu fills the height of the topbar.
It didn't quite, so I tried to force the issue by specifying a height in pixels for the topbar - which I probably don't need to do, probably shouldn't do, and doesn't quite line ups anyway.
If anyone could help me out with what I need to change to get that all lined up that would be much appreciated.
 
Thank you!

You commented on Iain MacDonald's post over 1 year

Thanks Ryan - that's really helpful, and clears that up for me. Basically the paths are specified in the gulp.js file which Yeti references while it is watching the folder, so the app.css file only needs to reference the file name.
And it makes sense with leaving the stuff in /bower_components/ although when I was looking yesterday at styling a top_bar, I saw a post about how most of the top_bar settings were no longer in the _settings.scss file, but were now in a top_bar.scss file in /bower_components/foundation-sites/scss/components/
So I did edit that - although just changing $topbar-padding to 0.
With something like that I should probably create a new file custom_settings or similar and add it to my app.scss file. 

Posts Followed



Following

  • No Content

Followers

  • No Content