-
what would be the proper way to increase .header height just to allow more breathing room and considering this drop down menu?
-
right now menu top visible border (where it becomes visible) is slightly above image thumbs. how can I move it slightly down so it starts drop down on the thumbs level?
I think it should not more than 30 PX. Because it look awkward with maximum height itās impact not good on visitor. so you can use sticky header.
You could just add padding top and bottom to the header if you just want more whitespace.
Then you would adjust the top position on the ul to account for the extra bottom padding you added.
The gap is the 7px top padding on those image blocks. You could either remove the top padding from the first two images or just push the menu down another 7px to match what padding was added to the images. Or apply a bottom negative margin to the header to drag those images back up by 7px. Or remove the 7px top padding and add 14px bottom padding to keep the look the same as it is now.
e.g.
.header{padding:30px 7px;}
.header h1{margin:0;}
main > div {
flex-basis: 50%;
padding:0 7px 14px;
}
@media screen and (max-width:960px){
.responsive .topnav ul{top:30px}
}
There are loads of other ways this could go but its up to you to decide which is best for your case.
Iāve update the example with the above changes integrated.
Thanks Paul.
I am also trying to make
<button class="ham-icon">
behave so that cursor changes into a hand. A quick google search returned a few results where it says that things like
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
are not valid in HTML5ā¦
ā¦because button element was originally designed as a form elementā¦
A button is not allowed inside an anchor (nor vice versa) and makes no sense anyway because they both have distinct actions that are not compatible with each other.
If you want the cursor:pointer on the button then just add it in css.
e.g.
.ham-icon {
cursor:pointer;
}
Itās as simple as that 
1 Like
Sorry Paul. I completely forgot about this. I used it before. Thanks for the reminder.
I am trying to build a simple footer for this layout. Please see http://buildandtest.atspace.cc/ for current footer where I used pretty much same display:table code from the header. Its more of a starting point and probably better suits tablet and mobile views (social icons on top of the paragraph with webhost link). For desktop view I would probably āfloatā social icons to the left and webhost link to the right. Not sure yetā¦
Since content will vary on each page my understanding is sticky footer could be a solution. I came across this article https://css-tricks.com/couple-takes-sticky-footer/ and was wondering if any of the described techniques could helpā¦
The only technique with flexible height is a flexbox one thoughā¦
Hi Ron,
When you get a chance can you take a look at the footer (test link in previous post # 92).
I am trying to do the following:
-
center social icons horizontally so they appear on top of
<p>which contains the link
(my guess is because I used.footer ul li { display: table-cell;}could be the reason I am not able to center those horizontallyā¦?) -
close the gap between
.wrap .main and .header
(Is the gap caused by.footer { display: table-row;}expanding automatically to fit
.wrap { display: table; }?) -
add :hover behavior to social icons so the background changes slightly on hover
(this rule.footer itargets initial background color but I canāt figure how to correctly target those to add :hover)
Iāve attached a screenshot of what I am trying to achieve.
Hello, Sergy.
See if this brings you closer to your goal. Notes in the CSS indicate where changes were made and explain why.
FYI: I added a āversion numberā at the ends of the file names to keep the HTML and CSS together. The number corresponds to the post # from which I worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style-flex-94a.css">
<title>footer-layout</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<!--
https://www.sitepoint.com/community/t/header-layout/305103/94
sergiy
Nov 17,2018 11:23 PM
ref: http://buildandtest.atspace.cc/
-->
</head>
<body>
<div class="wrap">
<header class="header" id="myTopnav">
<h1>Sergiy Prygara</h1>
<nav class="topnav">
<ul>
<li><a href="page-1.html">work</a></li>
<li><a href="page-2.html">about</a></li>
<li><a href="page-4.html">contact</a></li>
</ul>
</nav>
<button class="ham-icon"><span class="fa fa-bars fa-2x"></span></button>
</header>
<main>
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
<!--
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
<div><img src="images/thumb.png" alt="" width="600" height="425"></div>
-->
</main>
<footer class="footer">
<ul>
<li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
<p>This site is hosted by <a href="https://www.bluehost.com" target="_blank">Bluehost </a></p>
</footer>
</div> <!--.wrap-->
<script>
(function () {
var mql = window.matchMedia("screen and (max-width: 960px)");
//detect media query
var navTop = document.querySelector(".header");
//return first element within the document that matches .header
var toggle = document.querySelector(".ham-icon");
mediaqueryresponse(mql);
//ensures that addListener function is executed when the page loads, by default addListener only fires when state of the window changes
mql.addListener(mediaqueryresponse);
function mediaqueryresponse(mql) {
if (mql.matches) {
toggle.addEventListener("click", clickMenu);
//if media query matches, execute click or clickMenu event
} else {
navTop.classList.remove("responsive");
//otherwise remove .responsive
toggle.removeEventListener("click", clickMenu);
//and remove EventListener
}
}
function clickMenu() {
navTop.classList.toggle("responsive");
}
})();
</script>
</body>
</html>
and
html {
box-sizing:border-box; /*width includes or accounts for padding and border e.g.
original content width:160px - (2 * 20px) - (2 * 8px) = final width:104px
*/
}
*,*::before,*::after {
box-sizing:inherit;
}
/* box-sizing is not inherited - this is behavior that helps prevent
universal selector from overriding other selector. this reset also adds
pseudo elements*/
body {
font:normal 100% Arial, sans-serif;
color:#999;
margin:0;
}
.header,
main {
/* width:94%; /* this width reduces the width of .header and main; delete it. */
max-width:1000px;
margin:0 auto;
}
.header {
display:flex;
justify-content:space-between;
align-items:center;
padding:50px 7px;
}
.header h1 {
white-space:nowrap;
text-transform:uppercase;
margin:0;
}
.topnav {
display:table;
list-style:none;
margin:0;
padding:0;
}
.topnav ul {
list-style:none;
margin:0;
padding:0;
}
.topnav ul li {
display:table-cell;
width:7.5rem; /* max-width of each menu cell. (table-cell treats width as max-width) */
text-align:right;
}
.topnav ul li a {
font-weight:400;
color:#999;
text-transform:uppercase;
text-decoration:none;
}
.topnav a:hover {
color:#777;
}
.header .ham-icon {
display:none;
}
main {
display:flex;
flex-wrap:wrap;
justify-content:space-around;
align-items:center;
margin:0 auto;
outline:1px solid blue;
}
main > div {
flex-basis:50%; /* similar to width except more flexible */
padding:0 7px 14px; /* padding around the image is best assigned to its parent container */
}
main img {
display:block;
width:100%;
height:auto;
}
/*start sticky footer*/
html, body, .wrap {
height:100%;
margin:0;
padding:0;
}
.wrap {
display:table;
margin:0 auto;
padding:0;
outline:1px solid purple;
}
.footer {
display:table-row;
height:1px;
outline:1px solid yellowgreen;
}
.footer ul { /* ADDED */
list-style:none; /* apply to "ul", not "li" */
display:table; /* table-cells must be children of a table or table-row for reliable control. */
border-spacing:0.5rem; /* always apply to table, not cells. */
padding-left:0; /* removes default left padding from the "ul" */
margin:0 auto; /* center table; removes the default margin-top and margin-bottom from the "ul" */
}
.footer li { /* Do Not include "ul" in this selector. It becomes a specificity issue in later rules. */
display:table-cell;
outline:1px solid yellowgreen;
}
.footer li a { /* Changed this selector from ".footer i". These properties should style the social media anchors */
display:block; /* ADDED */
width:1.6em;
border-radius:0.8em;
font-size:1.6em;
text-align:center;
line-height:1.6em;
background:#999;
color:#fff;
}
.footer li a:hover {
background:#777;
}
.footer p {
text-align:center;
font-size:small;
padding:.5rem; /* replace removed margins with the same value of padding to prevent margin collapse */
margin:0; /* remove default margin-top and margin-bottom. */
}
.footer p a:link, .footer p a:visited {
color:#999;
}
.footer p a:hover, .footer p a:active {
color:#777;
}
/* end sticky footer */
@media screen and (max-width:960px) {
.header .ham-icon {
display:block;
cursor:pointer;
color:#999;
}
.header {
position:relative; /*creates the stacking context for the absolutely placed child .header:before*/
flex-wrap:wrap;
}
.header h1 {
position:relative;
z-index:1000; /* z-index greater than overlay 999 - makes h1 sit on top of overlay */
}
.header::before { /* creates transparent overlay (background) over the whole header*/
content:"";
position:absolute;
z-index:999;
left:0;
right:0;
bottom:0;
top:0;
transition:background 0s 0.5s;
background:transparent;
}
.header.responsive:before {
transition:background 0s 0s;
background:#fff; /* makes transparent overlay (backgound) white, this hides nav when it scrolls up and down */
}
.ham-icon {
position:relative;
z-index:1000; /* z-index greater than overlay 999 - makes ham button sit on top of overlay */
border:none;
padding:0;
margin:0;
background:transparent;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
outline:none;
}
.ham-icon:focus .fa {color:#999;}
.responsive .ham-icon .fa {color:#666;}
.topnav {
flex:1 0 100%;
width:100%; /* iphone requires this for some reason */
order:1;
position:relative; /* creates stacking context for absolutely placed child - .topnav ul */
z-index:998; /* places .topnav under overlay which has z-index 999, this hides the menu while not in use */
}
.topnav ul {
position:absolute; /*nav removed from the flow and placed on top of other elements, however, if other element had z-index higher than .topnav (998) .topnav would be behind that element*/
margin:0;
padding:0;
left:-999em;
right:999em;
top:0;
opacity:0;
transform:translateY(-100%);
transition:transform 0.5s ease, opacity 0.5s ease, left 0s 0.5s, right 0s 0.5s;
}
.responsive .topnav ul {
left:0;
right:0;
top:50px;
transform:translateY(0);
opacity:1;
transition:transform 0.5s ease, opacity 0.5s ease;
}
.topnav ul li,
.topnav ul li a {
display:block;
width:auto;
}
.topnav ul li a {
padding:20px;
text-align:center;
background:rgba(110, 106, 106, 0.9);
color:#fff;
border-bottom:1px solid #f9f9f9;
}
.topnav ul li a:hover {
color:#fff;
background:rgba(87, 84, 84, 0.9);
}
}
@media screen and (max-width:670px) {
main > div {
flex-basis:100%;
}
}
style-flex-94a.css (6.2 KB)
buildandtest-atspace-94a.html (3.0 KB)
3 Likes
what would be the proper way to add some top padding to social icons so thereās more space between them and bottom image thumbs?
Please update your test site so I will know what the code looks like. At this time, I do not know if you adopted any of the code from my previous post or not. I would prefer to work from known code rather than guess.
Thank you
2 Likes
Iāve updated the code. I also added .topnav li:nth-child(2) { padding-right: .6rem;} to slightly shift āaboutā menu item to the left to center it between other two menu items. However, it impacted the responsive menu - shifted responsive āaboutā menu item as wellā¦
Just add some top margin to the footer ul.
Padding adds space on the inside and margin adds space on the outside of an element.
.footer ul {
display: table;
list-style: none;
border-spacing: 0.5rem;
padding-left: 0;
margin: 30px auto 0; /*added top margin*/
outline: 1px solid blueviolet;
}
I would just use text-align center on those list items to find true center.
.topnav ul li {
display: table-cell;
width: 7rem;
text-align: center;
outline: 1px solid slateblue;
}
Now go back and take away the right padding you added on the 2nd li and it will produce thisā¦
If for some reason you were using text-align right to line up the last item with the edge of your page then that will change that idea.
If you werenāt using display:table-cell you could just remove the width and let it shrinkwrap. Then add some left margin, that would make equal spacing too. But table-cells donāt accept margins. Use inline-block in that caseā¦
.topnav ul li {
display: inline-block;
/*width: 7rem;*/
/*text-align: right;*/
outline: 1px solid slateblue;
margin-left: 40px;
}
Now your last li is flush to the right and all spacing is equal
1 Like
You are using display:flex on your header to keep the <h1> and <nav> on the same line.
If it were me I would just stay with flex on the nav ul too. No reason to jump back to table-cell or inline-block.
.topnav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.topnav ul li {
outline: 1px solid slateblue;
margin-left: 40px;
}
Iām still assuming you wanted āContactā flush on the right side since you used text-align right.
3 Likes
Remember to remove those for the smaller screen media queries
3 Likes
Thanks for the advice Ray.H
It looks like I also need to remove .topnav { display: table; list-style: none; margin: 0; padding: 0;} as same declarations are under .topnav ul and no need for display: table; ?
Sorry Paul can you clarify as to what needs to be removed or adjusted in responsive version?
Actually those styles never needed to be there since .topnav is your <nav> element.
The browser was actually constructing the <ul> with display:table on it previously since it was told that the list items were table-cells. Had you removed display:table from the <nav> you would see that the list still held together by the browser correctly adding display:table to the <ul> instead.
Donāt confuse the <nav> with the <ul>, which is the parent of all the <li> sā
Yes, remove all display:table styles from your .topnav ul
The <ul> gets the list-styles and default margin/paddings removed and gets set to display:flex
.topnav {
/*no styles needed at this point*/
/*browser knows it is a flex-item since .header is display:flex*/
}
.topnav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.topnav ul li {
margin-left: 2.9em;
/*outline: 1px solid slateblue;*/
}
.topnav li:nth-child(2) {
/* no need for this selector anymore */
}
Paul was just saying that the left margins need to be removed and the <ul> needs to be set back display:block
@media screen and (max-width:960px) {
.topnav ul {
position: absolute; /*nav removed from the flow and placed on top of other elements, however, if other element had z-index higher than .topnav (998) .topnav would be behind that element*/
/*margin: 0; this does not need to be declared again*/
/*padding: 0; this does not need to be declared again*/
left: -999em;
right: 999em;
top: 0;
opacity: 0;
transform:translateY(-100%);
transition: transform 0.5s ease, opacity 0.5s ease, left 0s 0.5s, right 0s 0.5s;
display: block; /*reset from flex*/
}
.responsive .topnav ul {
left: 0;
right: 0;
top: 50px;
transform:translateY(0);
opacity: 1;
transition: transform 0.5s ease, opacity 0.5s ease;
}
.topnav ul li,
.topnav ul li a {
display: block;
width: auto;
margin: 0; /*remove left margins*/
}
All changes mentioned in this post have been made in this amended css file, including footer ul top margin.
style-flex.css (5.6 KB)
2 Likes
I am also trying to shift top menu and ham icon few pixels down so that their bottoms are on the same level with the bottom of .header h1
I tried adding 1 rem top padding to .topnav ul however it messes up the responsive menu shifting it down and left
align-self ?