Below is my current header structure. The page (root) component is implied.
As you see social-links block's geometry is currently handled by the header__social-links mix (absolute position relative to the header).
How do I properly extract social-links to the global (page) scope making it an independent block (fixed position on the page)?
If I introduce the site or page block wrapping the header then I can apply page__social-links mix to solve that. Should header then be transformed into the page__header?
<body>
<header class="header hero" role="banner">
<img class="header__logo" src="assets/logo.png" alt="">
<div class="social-links header__social-links">
<a class="link social-links__link" href="#">
<svg class="social-links__icon">...</svg>
</a>
...
<a class="link social-links__link social-links__link--last" href="#">
<svg class="social-links__icon">...</svg>
</a>
</div>
<div class="navbar header__navbar">
<nav class="site-links navbar__site-links">
<a class="link site-links__link" href="#">1</a>
<a class="link site-links__link" href="#">2</a>
<a class="link site-links__link" href="#">3</a>
<a class="link site-links__link" href="#">4</a>
</nav>
</div>
</header>
...
</body>
You should separate the two scopes header and social-links as parent / child. It is important that BEM blocks are isolated. When using two classes from different blocks on the same elements, we risks future interference, and regression, when we will update one block without checking the other one.
The separation is also important to be able to move the social-links block.
// Show the fixed header on scroll
var fixedHeader = document.querySelector('.page__social-links');
document.addEventListener('scroll', function() {
if (window.scrollY > 100) {
fixedHeader.classList.remove('page__social-links--hidden');
} else {
fixedHeader.classList.add('page__social-links--hidden');
}
});
body {
margin: 0;
height: 300vh;
}
.page__social-links {
position: fixed;
top: 0;
left: 0;
right: 0;
background: hotpink;
}
/* Hide the fixed header by default */
.page__social-links--hidden {
display: none;
}
.header {
border-bottom: 1px solid hotpink;
}
.social-links {
text-align: center;
}
.social-links__link {
padding: 0 0.5em;
line-height: 3em;
}
<div class="page">
<div class="page__header">
<header class="header hero" role="banner">
<img class="header__logo" src="assets/logo.png" alt="" />
<div class="header__social-links">
<div class="social-links">
<a class="link social-links__link" href="#">
twitter
</a>
<a class="link social-links__link social-links__link--last" href="#">
facebook
</a>
</div>
</div>
</header>
</div>
<div class="page__social-links page__social-links--hidden">
<div class="social-links">
<a class="link social-links__link" href="#">
twitter
</a>
<a class="link social-links__link social-links__link--last" href="#">
facebook
</a>
</div>
</div>
</div>
Cheers,
Thomas.
Related
So I have a header with a navbar and some links like this.
When I hover on a link I have a border around it that looks like this.
Now only the HOME and CONTACT links are working and showing the cursors as a pointer and displaying the borders on hover but the other four aren't working or even showing a cursor to indicate that it's a link. How to fix this? Thanks.
Here's my header code:
<header>
<div class="navbar" id="navbar">
<div class="link" id="link">
HOME
</div>
<div class="link" id="link">
ABOUT
</div>
<div class="link" id="link">
OUR SERVICES
</div>
<div class="link" id="link">
PORTFOLIO
</div>
<div class="link" id="link">
CLIENT ALBUMS
</div>
<div class="link" id="link">
CONTACT
</div>
</div>
<div class="burger-menu">
<a href="javascript:void(0);" class="burger-style" id="showNavs">
<i class="fa fa-bars" style="color: black;"></i>
</a>
</div>
</header>
And here's my CSS:
#media screen and (min-width: 600px) {
header > .navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
padding-top: 1.2em;
margin-left: 3em;
margin-right: 3em;
}
#link {
text-align: center;
margin-left: calc(5px + 1vw);
padding: .5em;
border: 2px solid white;
}
#link:hover {
transition: .5s;
border: 2px solid black;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2.5em;
padding-right: 2.5em;
}
}
It doesn't work even though I already changed from classes to ids.
Here's my Jquery code but I don't think this is really relevant for this problem.
$(document).ready(function() {
var navbar = $("#navbar")
var showNavs = $("#showNavs")
$("#showNavs").click(function() {
navbar.toggle("slow")
})
var form = $("#contact-form")
var firstName = form.find("#firstName")
var lastName = form.find("#lastName")
var textarea = form.find("#textarea")
form.submit(function(e) {
e.preventDefault();
firstName.val('')
lastName.val('')
textarea.val('')
})
var newsletterForm = $("#newsletter-form")
newsletterForm.submit(function(e) {
e.preventDefault();
$(this).find("#email").val('')
})
})
Here's a full demo of my site.
Wedding Planner Website
The links are working fine when the browser isn't resized.
To Change the cursor to a pointer when you hover over something element add The Following In Your Styles:
cursor: pointer;
this will work regardless of the element when a user hovers over the element.
If It Works Please Mark As Correct!
Kamestart
(If It Does Not Work Please Share Your Code And Write In The Comments. It Will Help A lot.)
Edit: It Wont Work. If You Want To Stay On The Same Fir Testing Purposes Use # in the href attr. if it is empty it will not be recognised as a link.
I suggest you wrap your div's with anchor tag so the whole box will be clickable and also I looked at your site, there's a class="text-container" which is overlapping your Navbar when the window is resized, hope you'll know the reason now.
.navbar{
display:flex;
justify-content: space-evenly;
}
<header>
<div class="navbar" id="navbar">
<a href="">
<div class="link" id="link">
HOME
</div>
</a>
<a href="#about">
<div class="link" id="link">
ABOUT
</div>
</a>
<a href="">
<div class="link" id="link">
OUR SERVICES
</div>
</a>
<a href="#gallery">
<div class="link" id="link">
PORTFOLIO
</div>
</a>
<a href="">
<div class="link" id="link">
CLIENT ALBUMS
</div>
</a>
<a href="#contact">
<div class="link" id="link">
CONTACT
</div>
</a>
</div>
<div class="burger-menu">
<a href="javascript:void(0);" class="burger-style" id="showNavs">
<i class="fa fa-bars" style="color: black;"></i>
</a>
</div>
I am working on a project and i can't seem to find a way that works to center and make my footer responsive.
This is my html code.
#footer {
position: absolute;
left:0;
bottom: 0;
width: 100%;
height: 2.5rem;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
.socialIcon {//update
width: 20px;
}
<div id="footer">
<div class="col-lg-2 link_list">
Company Information
</div>
<div class="col-lg-2 link_list">
<a href="#" > Privacy Policy and User Agreement </a>
</div>
<div class="col-lg-2 link_list">
About
</div>
<div class="col-lg-2 link_list">
<a href="#" >
©2019 Copyright claim
</a>
</div>
```
<div class="col-sm-6 col-lg-3">//update
<a href="#">
<img src="images/linkedin.png" class=" socialIcon">
</a>
<a href="#" >
<img src="images/instagram.png" class=" socialIcon">
</a>
<a href="#">
<img src="images/facebook.png" class=" socialIcon">
</a>
<a href="#" >
<img src="images/youtube.png" class="socialIcon">
</a>
</div>
</div>
```
I tried some bootstrap classes like justify-content-center but it simply does not work. I know i need to be looking at flexbox but it won't work and i don't know what the problem is.
Thank you in advance for answering.
*Update after i did what i saw in the comments it doesn't work with the socialmedia icons.
I've edited your codes. I explained what I changed in the comment lines. I removed the display table. You don't need this with this codes.
Html :
<div id="footer">
<div class="row text-center"> // I added row here, and I've got all the columns in a row, because all columns must be in a row. I added a "text center" class to keep all the text in the middle.
<div class="col-sm-6 pb-sm-2 col-lg-3"> // that's how I arranged your columns . So they will adjust their width for each width value
Company Information
</div>
<div class="col-sm-6 col-lg-3">
Privacy Policy and User Agreement
</div>
<div class="col-sm-6 pb-sm-2 col-lg-3"> // "pb-sm-2" class to add padding bottom when dimensions are sm
About
</div>
<div class="col-sm-6 col-lg-3">
<a href="#">
©2019 Copyright claim
</a>
</div>
</div>
</div>
Css:
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
/* height: 2.5rem; */ you can use padding this way instead of specifying height. if you give a single height value, you will need to set height separately for all dimensions.
padding: 20px;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
I hope I could help. Good Luck!
See the code below. You can forget about wrapping each anchor within a "div". It will be a lot easier to simply group them into the parent DIV and then target them. This should work and you can have more flexibility. Also, don't have to worry about flexbox or any external libraries.
<style>
body{
height:2000px; /* for demonstration purposes*/
}
/* position the footer div RELATIVE and give it a "top" property of 100% so it always sits at the bottom regardless of your window height*/
#footer {
position: relative;
top:100%;
width: 100%;
height: 2.5rem;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
/* center all items INSIDE the link_list DIV*/
.link_list{
text-align:center;
}
/* target all the ANCHOR tags as inline elements*/
.link_list a {
margin:50% 20px;
color:white;
text-decoration:none;
text-align: center;
flex: 0 0 16.666667%;
}
</style>
<body>
<div id="footer">
<div class="col-lg-2 link_list">
Company Information
<a href="#" > Privacy Policy and User Agreement </a>
About
<a href="#" >©2019 Copyright claim</a>
</div>
</div>
</body>
Add display:flex; to #footer and it gets a bit of responsiveness.
quick fiddle => https://jsfiddle.net/0b9hoag1/
So I have footer section on the website I'm currently building, and the problem is order of them showing. I want to social icons be above ©
Have a look: footer
html:
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
<div class="col-md-6">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
</div> <!-- end of row -->
</div>
css:
#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}
I tried to add class 'order-md-6' to each div with col-md-6, but first of all it didn't work, and secondly it broke layout - it 'pushed' both elements to center. Is it even possible in bootstrap4? I also have a problem centering these items u can see on image I've upload. I'm struggling with this for 2hours and I have no idea how to get this done. I would appreciate any help. Thanks
Bootstrap 4 uses flexbox to position the columns in their rows so you can add the following to your CSS to the control the order of the columns:
.col-md-6:last-child {
order: -1;
}
Not sure if what you provided is the full code sample of your footer or not, but if that's your full html, you're missing a closing tag.
Also, assuming all you want are the icons to go above the copyright line and centered, try this:
#footerbot .socialIcons {
text-align: center;
}
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="socialIcons">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
</div> <!-- end of row -->
</div>
</div>
Currently, the top of my web page looks like this:
I'm trying to use Bootstrap instead of CSS as I was told it was simpler (however so far I'm struggling to bend it to my will just as much as CSS). I have a div containing the logo and title, and a Bootstrap container with a list group of buttons to share the website. I want the buttons to appear on the right hand side of the page inline with the logo.
HTML:
<div class="headerDiv" style="display: inline">
<div>
<img id="logo" src="{% static "images/logo.jpg" %}" alt="Fact or Fiction Logo" />
</div>
<div class="titleDiv">
<h1 id="title">FACTorFICTION</h1>
</div>
</div>
<div class="container" style="display: inline">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="list-group list-group-horizontal">
<script>
function fbs_click() {
u = location.href;
t = document.title;
window.open
('http://www.facebook.com/sharer.php?u=' +
encodeURIComponent(u) + '&t=' + encodeURIComponent(t),
'sharer', 'toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a class="list-group-item" href="http://www.facebook.com/share.php?u=http://www.example.com/" onclick="return fbs_click()" target="_blank">
<img src="{% static "images/facebook.jpg" %}" alt="Share to Facebook.">
</a>
<a class="list-group-item" href="https://twitter.com/home?status=http://www.example.com/" onclick="window.open('https://twitter.com/home?status=Fact Or Fiction http://www.example.com/; return false;">
<img src="{% static "images/twitter.jpg" %}" alt="Share to Twitter.">
</a>
<a class="list-group-item" href="https://plus.google.com/share?url=http://www.example.com/" onclick="window.open('https://plus.google.com/share?url=http://www.example.com/',null,'height=626,width=436,status=yes,toolbar=no,menubar=no,location=no'); return false;" target="_blank">
<img src="{% static "images/googleplus.jpg" %}" alt="Share to Google Plus.">
</a>
<a class="list-group-item" href="http://www.reddit.com/submit" onclick="window.open('http://www.reddit.com/submit?url=http://www.example.com/',null,'height=900,width=750,status=yes,toolbar=no,menubar=no,location=no'); return false;">
<img src="{% static "images/reddit.jpg" %}" alt="Share to Reddit.">
</a>
</div>
</div>
</div>
</div>
CSS:
.list-group-horizontal .list-group-item {
display: inline-block;
}
.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-left:-4px;
margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
}
.headerDiv {
float: left;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 5px;
margin-right: 5px;
}
.headerDiv div {
display:table-cell;
}
.titleDiv {
position: relative;
top: 30px;
width:100%;
}
I have tried putting the two divs inside another, however for some reason this causes my buttons to be vertical, and still beneath the logo.
I'm open to all suggestions, including telling me that I'm going about this completely wrong. Thanks in advance.
Bootstrap is easy as long as you understand the fundamental concept and basic structure. It general has a structure of a container with rows and within each row, you could have several cols. With that in mind, it is as easy as this:
<div class="container">
<div class="row">
<div class="headerDiv col-xs-4">
<img src="https://placehold.it/200x50">
<h1 id="title">Company Name</h1>
</div>
<div class="list-group list-group-horizontal col-xs-8">
<img src="https://placehold.it/80x20">
<img src="https://placehold.it/80x20">
<img src="https://placehold.it/80x20">
<img src="https://placehold.it/80x20">
</div>
</div>
</div>
With minimum styling as:
.headerDiv {
display:inline;
float:left;
}
h1#title {
display:inline;
}
.list-group {
float: right;
}
You can style the rest of margins and alignment of text as you need.
When I try resizing my window the text and images seem to spill out of the wrapper element that I created. They are both inside of a container within the wrapper, yet they seem to continuously spill out into the next portion of white space. I need to find a way to keep them anchored to the blue wrapper element when the window is resized.
Here is the HTML:
<!-- Middle page grid content -->
<div class="middle-grid">
<h1>Features</h1>
<p>Explore our extensive library of tools & features.</p>
<p>Identify what works best for <strong>your</strong> needs.</p>
<div id="wrapper">
<div class="container">
<a class="collab" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/CollabTile_zpsuxqcjyau.png" height="30%" width="24%"style="margin:4% .3%"/> </a>
<a class="plan" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/PlanTile_zpsb4q2w1vv.png" height="30%" width="24%"style="margin:4% .3%"/> </a>
<a class="recruit" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/RecruitTile_zpsqdasla20.png" height="30%" width="24%"style="margin:4% .3%"/> </a>
<a class="publish" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/PublishTile_zpsagiliwn8.png" height="30%" width="24%"style="margin:4% .3%"/></a>
<a class="edit" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/EditTile_zpswdstab8b.png" height="30%" width="24%"style="margin:2% .3%"/> </a>
<a class="develop" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/DevelopTile_zpscb6ydckr.png" height="30%" width="24%"style="margin:2% .3%"/> </a>
<a class="create" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/CreateTile_zpsc1y9ucff.png" height="30%" width="24%"style="margin:2% .3%"/> </a>
<a class="manage" href="#"><img src="http://i1104.photobucket.com/albums/h329/nicreed1/ManageTile_zpsmlbfmznw.png" height="30%" width="24%"style="margin:2% .3%"/> </a>
<p>Our options provide realistic solutions for realistic. Pricing is also competative, yet pallatable to even the the most earnest startup.</p>
<p>Explore our library of options today and listen to testimonials HERE.</p>
</div>
</div>
</div>
Then here is the CSS:
/Middle Page Content/
.middle-grid h1 {
font-family: 'Slabo 27px', serif;
font-weight: bold;
text-align: center;
font-size: 64px;
}
.middle-grid p {
font-family: 'Slabo 27px', serif;
text-align: center;
font-size: 40px;
line-height:90%;
}
#wrapper
{
background-color:#34495e;
height:90%;
color: white;
}
.container {
width:100%;
margin-left: 10px;
margin-right: 10px;
position: relative;
margin: auto;
}
.a {
float: left;
margin-right: 10px;
}
Thanks a ton in advance for any help available!