what I am trying to do is modify the style of my b-collapse since by default it has a vertical style that I think and what I want is to give my menu a horizontal style
This is how I implement it:
<div style="background-color:white;">
<b-collapse id="collapse-cat-lvl1-469">
<div data-cat-acc="473" class="grid-item parent-lvl-2">
<a class="link -1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
<span class="text">GTI</span>
</a>
</div>
<div data-cat-acc="474" class="grid-item parent-lvl-2">
<a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="474">
<span class="text">Pets</span>
</a>
</div>
</b-collapse>
</div>
You can modify <b-collapse id = "collapse-cat-lvl1-469"> in if this: collapse-cat-lvl1-469 ???
What I intend is to give it better style with CSS, or some way that I can see my menu horizontally and not vertically
.navbar-greetings, .login-section{display: none}
#menu-header.collapse:not(.show){
display: block;
}
#menu-header{
position: fixed;
top: 25px;
max-width: 83%;
margin: 0 auto;
left: 8.32%;
.panel{
button{
display: block;
color: white;
font-size: 13px;
font-family: 'VWHead-Bold';
}
}
#accordion-mbl-menu{
display: flex;
}
}
Related
I'm trying to achieve a solution where a horizontal line appears to the left of the text but the text remains centre aligned. Please see image below.
I've also added my mark-up below. I'm currently using Bootstrap 4.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
</div>
Use pseudo-elements to do so:
.sidebar-first-item {
position: relative;
}
.sidebar-first-item:before {
content: '';
position: absolute;
width: 45%;
height: 5px;
background-color: red;
top: 50%;
left: 0%;
}
CodePen: https://codepen.io/manaskhandelwal1/pen/xxEaQYg
First cleanup your html, a <ul> list may not have children other than <li>, <script> or <template> elements (see The Unordered List element). Hence remove the div's inside the <ul> and add their classes to the <li>.
A solution to your design problem is to add a element before and after your anchor elements, size them (width) with a percentage you like and set a min-width for the anchor, so you have a nice responsive layout also on small devices. This creates an equal width red line
If you want the red line to align with the width of the text, you can make your anchor non-breaking white space and a set a padding, so the red line comes as close as defined in the padding towards the text.
.redline,
.spacer {
width: 100%;
height: 3px;
display: inline;
background-color: red;
}
.spacer {
height: 0px;
}
li {
display: flex;
align-items: center;
}
li a {
margin: 0 auto;
border: 0px solid gold;
padding: 0 20px;
white-space: nowrap;
}
li p {
width: 100%; margin:-50px 0 50px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
<ul>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2 class="sidebar-first-item">About</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Take a look at our marvelous creations</p>
</li>
<li class="pb-5">
<span class="redline"></span>
<a href="#">
<h2>Our Work</h2>
</a>
<span class="spacer"></span>
</li>
<li>
<p>Behind the brand // Meet the team</p>
<li>
</ul>
</div>
This is where a CSS pseudo element can come into play! A pseudo element can be used to place designs before or after an element.
I added a class called horizontal-line to your h2.
<div class="text-center nav-items">
<ul>
<div class="pb-5">
<li>
<h2 class="horizontal-line sidebar-first-item">About</h2>
</li>
<p>Behind the brand // Meet the team</p>
</div>
<div class="pb-5">
<li>
<h2>Our Work</h2>
</li>
<p>Take a look at our marvelous creations</p>
</div>
<div class="pb-5">
<li>
<h2>Services</h2>
</li>
<p>Learn more about what we can do for you</p>
</div>
<div class="pb-5">
<li>
<h2 class="sidebar-last-item">Contact</h2>
</li>
<p>Get in touch today. Let's make some magic</p>
</div>
</ul>
The CSS will look like this.
.horizontal-line {
position: relative;
}
.horizontal-line::before {
content: "";
display: block;
width: 60px;
height: 2px;
position: absolute;
top: 50%;
left: 35%;
border-radius: 30px;
background-color: #DE657D;
}
By adding the pseudo element it will know to place it before any content with that class name. In this case, we are leaving content blank and placing in
https://jsfiddle.net/rc463gb8/1/
I want to make a nav bar in the footer with images. The footer needs to be 10% of the total screen and the images need to be within those 10% as well. Only I don't get the images scale according to the screen size and are way bigger. What am I doing wrong?
I am using Bootstrap 4 and I intent to make a mobile version of my website but it is not displaying good.
<div class="footer navbar row">
<div class="col-sm-2 menu_item">
<a href="#home" class="active">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#news">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: var(--primary-color-1);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
height: 10vh;
}
/* Style the menu blocks */
.menu_item {
position: relative;
padding: 2px 10px;
margin: 0px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
text-align: center;
text-decoration: none;
}
/* Style the images/icons of the links */
.menu_img {
height:100%;
width: 100%;
object-fit: cover;
}
responsive img's need width: 100%; to be responsive, you can control the image size with his container, for example:
<div class="img-container">
<img src="imgUrl"/>
</div>
img{
width: 100%;
}
.img-container{
width: 10%;
}
I found the solution. My structure is like
<div class="footer">
<div>
<a>
<img>
</a>
</div>
</div>
The footer div needs to be height:10%. But I need to set the height of all the other elements to 100%(which I didn't do before). Otherwise it will extend outside those. 'borders'
I have this JSFiddle: https://jsfiddle.net/96urhqcz/
There are 4 divs in a row - the HTML looks like this:
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link1/">
<div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
<i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i>
Link Number 1
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link2/">
<div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
<i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i>
Link Number 2
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link3/">
<div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
<i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i>
Link 3
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link4/">
<div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
<i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i>
Link 4
</div>
</a>
</div>
The CSS for g-1-4 looks like this:
.g-1-4{
width: 25%;
}
As you can see in the JSFiddle - the margins between the boxes are 'linked' to the appropriate box.
Ultimately I'm trying to have a 4-across layout, but have the margins not linked. When a user mouses between the boxes I want it to be a regular mouse with no clickability.
I'm sure it's something really simple I'm missing - but I can't seem to correct it.
Any thoughts or ideas?
You can set a fixed width to your divs, and using flexbox they will be automaticaly displayed with space which is not 'linked'.
Hope this little code will help you.
.flex {
display : flex;
justify-content : space-around;
}
.div1, .div3 {
width : 120px;
height : 120px;
background-color : red;
}
.div2, .div4 {
width : 120px;
height : 120px;
background-color : blue;
}
p {
margin : 0;
color : white;
line-height: 120px;
font-size : 12px;
text-align : center;
}
<div class="flex">
<a href="#" class="div1">
<p>LINK 1</p>
</a>
<a href="#" class="div2">
<p>LINK 2</p>
</a>
<a href="#" class="div3">
<p>LINK 3</p>
</a>
<a href="#" class="div4">
<p>LINK 4</p>
</a>
</div>
Take the margin off of the <div> and add it to the <a> that's wrapping the div. Also add style="display:block:" to the <a>.
This CodePen has the updates.
The issue is coming from your using the table cell display method.
.g > div,
.g-m > div {
display: table-cell;
vertical-align: top;
}
I also support the flex box usage as pointed out by Louis.
What is happening is that the link element is expanding to the 100% of the container div to get some space you could set a specific width for the a tag or you could add some padding to the container element, you will have to play with padding and width to make it look good though.
https://jsfiddle.net/96urhqcz/1/
.g-1-4{
width: 25%;
padding: 10px;
}
Been having difficulty trying to center vertically a Font Awesome icon, a 2 text line div, and 2 more icons in the same Bootstrap row div. I managed to fake the needed outcome but after hours trying out numerous CSS properties I'd love to hear what the best solutions was.
So the items I need to position vertically centered so those stay that way regardless of the containing element size are the 'fa fa-building-o fa-4x' icon, the 2 lines of text to its right ("X5 Retail Group" and "Company address and contacts"), both are of different font size (which I attempted to achieve with <h5> and <h3> tags), and the 2 icons to the right.
It was not required to make the sections of a certain height. The line-height property contains a number convenient to me at the moment.
The code was designed for Firefox 39.
Here's a Plunkr link to my html: https://plnkr.co/edit/0BVnHFowRD53KOVoy1KU?p=preview
Below is the .html of the page.
body {
padding-top: 20px;
}
section#top1 {
line-height: 40px;
}
section#top2 {
line-height: 80px;
}
.monitoring {
background-color: #E8E8E8;
}
.monitoringh4 {
display: inline;
}
.h4buttonlike:hover {
cursor: pointer;
font-weight: bold;
}
section#top3 {
line-height: 60px;
}
section#top4 {
line-height: 80px;
}
.container {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 5px;
}
.container .col-md-12 {
background: #e6e6e6;
border-radius: 4px;
}
.container .logo {
display: inline;
margin: auto 0 auto 0;
width: 80px;
}
.container h4 {
font-size: 1.0em;
display: inline;
margin-left: 5px;
text-align: center;
}
section#top1 .container ul {
display: table;
margin: auto 0;
float: right;
}
section#top1 .container ul li {
display: table-cell;
padding-right: 15px;
}
.settings i {
vertical-align: middle;
}
.container i {
margin-right: 5px;
}
.dropdown {
display: inline;
margin-left: 5px;
margin-top: 3px;
}
.myclass {
text-align: right;
}
section#top4 .brands {
position: absolute;
top: 50%;
display: inline-block;
/* margin-left: 20px; */
transform: translate(5%, -55%);
}
.exp {
height: 56px;
width: 44px;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.my-icons {
position: absolute;
top: 50%;
right: 15px;
transform: translate(-60%, -50%);
display: inline-block;
}
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section id='top1'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<img class='logo' src='http://www.toennies.com/uploads/pics/fTRACE-Logo_02.png'>
<h4>Company name</h4>
<ul>
<li>Total items: 100</li>
<li style='color: #009900;'>Oline: 82</li>
<li style='color: #787878;'>Offline: 16</li>
<li style='color: #FF0000;'>Damaged: 6</li>
</ul>
</div>
<div class='clearfix'></div>
</div>
</div>
</section>
<section id='top2'>
<div class='container'>
<div class='row'>
<div class='col-md-9 monitoring'>
<div class='monitoringh4'>
<h4>Monitoring</h4>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Reports
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Report 1
</li>
<li>Report 2
</li>
<li>Report 3
</li>
</ul>
</div>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Tune
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Tune 1
</li>
<li>Tune 2
</li>
<li>Tune 3
</li>
</ul>
</div>
</div>
<div class='col-md-3 monitoring'>
<div class="dropdown">
<h4 class="dropdown-toggle h4buttonlike" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
John Doe (Admin)
<span class="caret"></span>
</h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Jane Doe
</li>
<li>Jack Doe
</li>
<li>Jimmy Doe
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id='top3'>
<div class='container'>
<div class='row'>
<div class='col-md-12 settings'>
<h4><i class="fa fa-desktop fa-2x"></i>Tuneup > Company profile > X5 Retail Group</h4>
</div>
</div>
</div>
</section>
<section id='top4'>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='exp'><i class="fa fa-building-o fa-4x"></i>
</div>
<div class='brands'>
<h3>X5 Retail Group</h3>
<h5>Company address and contacts</h5>
</div>
<div class='my-icons'>
<h5><i class="fa fa-pencil-square-o"> Edit</h5>
</i>
<h5><i class="fa fa-print"></i>Print</h5>
</div>
</div>
</div>
</div>
</section>
Thank you.
I am jumping into a large complex application today and it's a bit daunting.
So, I want to solve the issue locally then find where the solution should eventually be located.
I have square images that come from sources of various sizes. Currently the image fills the div regardless of its dimensions.
<li class="hint-li" data-position="undefined" data-id="551ef3279934asda2e2565" id="551efsfasd8354582e2565" style="background-image: url(http://s3.amazonaws.com/source/558dadasd9a0f3.616asd74.jpg);">
<div class="sold-out hidden">
</div>
<div class="partnered hidden">
</div>
<div class="overlay">
<div class="row">
<div class="col">
<strong>
Thermal bath, aromatherapy, massage
</strong>
<em>
Aire Ancient Bath
</em>
<strong class="hintPrice">
$181
</strong>
</div>
</div>
</div>
<div class="options">
<div class="row">
<div class="col">
<a target="_blank" class="buy" href="http://www.ancientbathsny.com/aire-services/thermal-bath-with-aromatherapy-and-relaxing-30-minutes-massage/">
Buy
</a>
<a target="_blank" class="hint">
Hint
</a>
</div>
<div class="col">
<ul>
<li>
<a class="twitter" target="_blank">
<span class="sprite twitter-alt">
</span>
</a>
</li>
<li>
<a class="facebook" target="_blank">
<span class="sprite facebook-alt">
</span>
</a>
</li>
<li>
<a class="email">
<span class="sprite email">
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
Here is the CSS that effects these image sizes:
.grid>ul>li {
width: 247px;
height: 250px;
background-position: center;
background-size: cover;
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
vertical-align: top;
cursor: pointer;
-webkit-box-shadow: 1px 1px 1px 1px #ddd;
box-shadow: 1px 1px 1px 1px #ddd;
}
I'm trying to center the image within the div and have the remaining space be white space:
I have tried various approaches such as:
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
But it is breaking their format on the page.
How do I get the desired behavior?
As in this JS Fiddle these lines should be in your .grid>ul>li css:
background-position: center center;
background-repeat:no-repeat;
background-size: contain;
background-color:white;
EDIT: My answer is not actually applicable to OP, but I will leave it here in case someone is looking to center img elements as OP described in the title.
Wrap the following class around each img attribute:
.example-wrapper img {
text-align:center;
transform: translateY(-50%);
top: 50%;
height: auto;
max-width: 100%;
max-height:100%;
position: relative;
background-color: white;
}
extra option: "text-align:center;" above can be replaced with:
display: flex;
justify-content:center;
HTML
<div class="example-wrapper">
<img ....>
</div>