I am making a website using semantic ui as my framework and everything looks fine except when I click on the sidebar icon for the sidebar menu to pop up, the background image disappears that I've set using
$body {
background:url('https://lostandtaken.com/wpcontent/uploads/2010/04/141-1560x1170.jpg');
}
and that worked fine. But it disappears as soon as the sidebar menu pops up. I tried looking at the relationship between the sidebar and the body tag but I realized that the body height was way smaller than the size of the screen meaning that 80% of the elements were overflowing. I tried setting the body height to be 100% but that didn't work and also for some reason, chrome sets overflow to visible even if I manually set it to be hidden just to see and it also creates a pushable class. I am included a screenshot to show the height of the body according to the browser: which like 15 or 20% of the full height.
and Here is the sidebar
Here are the important part of my code
HERE IS A JSFIDDLE IF YOU WOULD LIKE TO SEE THE CODE: https://jsfiddle.net/bmb45L3p/
HTML code
<!--=================================================================================================== -->
<body>
<div class="ui borderless inverted fixed menu trial " style=" z-index: 10; font-family: 'IM Fell Double Pica', serif; font-size: 16px;">
<a class="item icon "> <i class=" wide sidebar big icon" id="mysidebar"></i></a>
<a class=" item" style="font-family: 'IM Fell Double Pica', serif; font-size: 20px; font-weight: bold;"> MENU </a>
<div class= " right menu">
<a class="item" id="logospot"></a>
</div>
</div>
<div class ="ui sidebar compact inverted labeled icon vertical menu" id="theirsidebar" style="z-index: 99;">
<a class ="active item">
<i class="home icon"></i>Home</a>
<a class ="item">
<i class="info icon"></i>About SLIDE</a>
<a class ="item">
<i class="user circle outline icon"></i>Meet the Staff</a>
<a class ="item">
<i class="users icon"></i>Meet SLIDERS</a>
<a class ="item">
<i class="block layout icon"></i>Committees</a>
<a class ="item">
<i class="announcement icon"></i>Events</a>
<a class ="item">
<i class="image icon" ></i>Pictures</a>
<a class ="item">
<i class="write icon"></i>Apply</a>
<a class ="item">
<i class="mail outline icon" ></i>Contact us</a>
<a class = "item">
<i class="user icon"></i>Member Login
</a>
<a class = "item">
<i class="user circle icon"></i>Staff Login
</a>
</div>
<div class="ui pusher">
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<div class="ui container" style="display: block ; padding-top: 120px;">
<h3 style= "font-family: 'IM Fell Double Pica', serif; font-size: 60px;" class = "ui header center aligned">MEET OUR '17-'18 STAFF</h3>
css
Try this
Remove the image CSS from body and add an Id called as bg_img
<body>
<div id="bg_img">
<!--menu code here-->
<!--main content-->
<!--footer-->
</div>
</body>
add the css to id
html,body{margin:0;padding:0;height:100%;}
#bg_img{
background:url('http://www.theriversouth.org/wp-content/uploads/2016/01/Light-Grey-Background-Tumblr-8.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
background-position: center;
min-height:100%;
}
Related
I'm trying to (1) get an image carousel to vertically center images, and (2) get the carousel to shrink to the height of the smallest image [i.e. not have wasted white space]. This is sort of a "multiple image" carousel, like this one: https://bbbootstrap.com/snippets/clients-brand-logo-carousel-slider-20683486.
I don't know what classes to add where. Obviously looked at d-flex + justify-items + align-items, and some other SO posts suggesting that I change the oc-item and related classes to height: 100%; position: relative; but none of those seemed to have the desired effect.
Given the naming, I assume this is an implementation of the owl carousel (https://owlcarousel2.github.io/OwlCarousel2/).
HTML, which includes many elements that are added-in via JS (not my JS, I'm using a package I purchased from Themeforest, called Canvas https://themes.semicolonweb.com/html/canvas/blocks.html... I think it's the one on the bottom of this page https://themes.semicolonweb.com/html/canvas/slider-owl.html the CSS and JS should be the same for this page as what I'm using):
<section id="content">
<div class="content-wrap p-0" id="content-wrap-logos">
<div class="container">
<div class="fancy-title title-center title-border m-4">
<h4><small>AS SEEN WITH</small></h4>
</div>
<div id="oc-images" class="owl-carousel image-carousel carousel-widget align-middle align-items-center owl-loaded owl-drag with-carousel-dots" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5">
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2369px;">
<div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
<div class="oc-item">
<img src="..." alt="...">
</div>
</div>
<div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
<div class="oc-item">
<img src="i..." alt="...">
</div>
</div>
... etc ...
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev disabled">
<i class="icon-angle-left"></i>
</button>
<button type="button" role="presentation" class="owl-next">
<i class="icon-angle-right"></i>
</button>
</div>
<div class="owl-dots">
<button role="button" class="owl-dot active"><span></span></button>
<button role="button" class="owl-dot"><span></span></button></div></div>
</div>
</div>
</div>
</section>
Your are not shared the css code but here is the solution.
Give anchor display block , min-height and vertical-align middle. So image come vertically center.
.owl-item a {
display: block;
vertical-align: middle;
min-height: 38px;
}
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>
In advance, I apologize for my bad English.
My logo (which should be positioned in the horizontal center on the header) gets shifted like 5px to the left.
The hamburger icon is also like 5px wide, so I tested what would happen if I set the hamburger icon property display:none; and the logo shifted perfectly to the horizontal center.
I already set the margin-left and margin-right properties for the logo to auto and it works fine, except for the 5px shift to the left.
Do you have any idea how to solve this problem?
I'm grateful for any answer.
<div
class="fusion-header-v6 fusion-logo-center fusion-sticky-menu- fusion-sticky-logo- fusion-mobile-logo- fusion-header-has-flyout-menu">
<div class="fusion-header-sticky-height"></div>
<div class="fusion-header">
<div class="fusion-row">
<div class="fusion-header-v6-content fusion-header-has-flyout-menu-content">
<div class="fusion-logo" data-margin-top="31px" data-margin-bottom="31px" data-margin-left=""
data-margin-right="0px">
<a class="fusion-logo-link" href="#">
<!-- standard logo -->
<img src="link" srcset="link 1x" width="2792" height="1216" retina_logo_url=""
class="fusion-standard-logo" />
</a>
</div>
<div class="fusion-flyout-menu-icons">
<a class="fusion-flyout-menu-toggle" aria-hidden="true" aria-label="Toggle Menu" href="#">
<div class="fusion-toggle-icon-line"></div>
<div class="fusion-toggle-icon-line"></div>
<div class="fusion-toggle-icon-line"></div>
</a>
</div>
</div>
</div>
</div>
</div>
I have a weird issue with the text under the icon bar not being centered under the icons.
code example
<div class="row">
<div class="small-12 columns">
<div class="icon-bar five-up small">
<a class="item" a href="/index.html">
<i class="fi-home"></i>
<div>
<label>Home</label>
</div>
</a>
<a class="item" a href="/cart.html">
<i class="fi-shopping-cart"></i>
<div>
<label>Cart</label>
</div>
</a>
<a class="item" a href="/pages/about-us">
<i class="fi-info"></i>
<div>
<label>About</label>
</div>
</a>
<a class="item" a href="/pages/contact-us">
<i class="fi-mail"></i>
<div>
<label>Contact</label>
</div>
</a>
<a class="item" a href="/account/login">
<i class="fi-torso"></i>
<div>
<label>Account</label>
</div>
</a>
</div>
</div>
</div>
I've tried to center the labels with no luck. Has anyone had any issue with this before. Can't post a screenshot since it's a new account. but the contact label and account label seem to start on the left of the icon and go right instead of the start of the actual icon box.
Ok your problems is about CSS in foundation. the property "padding" here:
.icon-bar > * {
font-size: 1rem;
padding: 1.25rem;
}
To fix that, you need to add a media query for mobile. Maybe something like:
#media (max-width: 400px) {
a.item {
padding-left: 0;
padding-right: 0;
position: relative;
text-align: center;
}
}
Change the value 400px of your resolution. If its doesn't work because CSS style is overrite by another.. change padding-left and padding-right for:
padding-left: 0 !important;
padding-right: 0 !important;
Check this JSFiddle
I am using Bootstrap and Font Awesome to make a table like the one from FAQ zalando.
So on the left side, there should be an icon, and on the right side, there should be text.
I want the text to be exactly under each other, they should not be out of alignment with each other. If I give the icons a span, then it will be ignored.
Here is my code:
<div class="row">
<i class="span2 icon-user "></i>
<div value='register' class="span4">
Registrierung
</div>
<i class="icon-mobile-phone span2"></i>
<div id='Newsletter' class="span4">
Newsletter
</div>
</div>
<div class="row">
<i class="icon-euro span2"></i>
<div value='kost' class="span4">
Kosten
</div>
<i class="icon-phone span2"></i>
<div id='probleme' class="span4">
Probleme
</div>
</div>
As an update to this, FontAwesome now has fixed-width support built in.
<i class="fa fa-fw fa-user"></i>
The fa-fw class supplies the fixed-width style.
Put your icon inside the element and make it behave as an inline-block so you can change its width and margin.
http://jsfiddle.net/LeBen/B9yjd/
Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.
Why having empty elements if you only want a background image for an element?
Just add the icon as background-image and set the padding-left for all these elements to the required value.
Just target the icons classes directly adding your styles in css:
[class*="btn-"]:before,
[class^=" btn"]:before {
margin-right: 1em;
}
And there's no need for an empty , just use:
<div class="row">
<div value='register' class="icon-user span4">
Registrierung
</div>
<div id='Newsletter' class="icon-mobile-phone span4">
Newsletter
</div>
</div>
just had this issue playing around with the options after not wanting to bang all my FontAwesome icons in spans/divs. Adding class 'fa-fw' did indeed solve it, but so does simply adjusting the width of the icon with CSS (maybe a new thing as this is an old post), so no extra classes needed if you have many icons. 'svg-inline--fa' was a common class for all my icons - see example
.item{
padding: 5px;
}
.svg-inline--fa{
font-size: 20px;
width: 40px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
<div class="item">
<i class="fas fa-bolt"></i>
Fast, local and friendly team
</div>
<div class="item">
<i class="fas fa-tags"></i>
Honest and transparent pricing
</div>
<div class="item">
<i class="fas fa-handshake"></i>
All our work is guaranteed
</div>
<div class="item">
<i class="fas fa-clipboard-check"></i>
Trained to the highest UK standards
</div>