I'm using a template that uses and I used it to implement a multi-language select. Problem is: when i switch to mobile view the top-header disappears and only the navbar stays. Does anyone have an idea how i can keep the top-header? Template uses Bootstrap 3
<body>
<div class="box-layout">
<header class="header-style-1">
<div class="bg-header-top">
<div class="container">
<div class="row">
<div class="header-top">
<div class="row">
<div class="col-md-3">
<img src="../assets/images/index/logo.png" alt="logo" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="header-top-right pull-right">
<ul class="header-contact">
<li>
<i class="flaticon-vibrating-phone"></i>
<div class="h-adress-content">
<h6>Telefon</h6>
<p>XXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<i class="flaticon-placeholder"></i>
<div class="h-adress-content">
<h6>Adresse</h6>
<p>XXXXXXXXXX</p>
</div>
<!-- .h-adress-content -->
</li>
<li>
<div class="h-adress-content">
<p><img src="../assets/images/index/de.png"> DE</p>
<p><img src="../assets/images/index/pl.png"> PL</p>
</div>
<!-- .h-adress-content -->
</li> `
Related
so what i miss ?i try to solve it but i cant or should i start again?
that is html code and if you want css too i can send it :
<section id="contact" class="section">
<!-- Container Starts -->
<div class="container">
<!-- Start Row -->
<div class="row">
<!-- Start Col -->
<div class="col-lg-6 col-md-12">
<div class="Container">
<div class="contactinfo">
<div>
<h2>Contact Info</h2>
<ul class="info">
<li>
<span><img src="img/contact/Email.png"></span>
<span>colbration#visionviewplus.com</span>
</li>
<li>
<span><img src="img/contact/wechat.png"></span>
<span>wechat ID : 212131321</span>
</li>
<li>
<span><img src="img/contact/qq.png"></span>
<span>QQ ID : 212131321</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</section>
=============================
I am trying to show the screen like in the image
list inside a container
the problem is the whatever I do, the list is on the bottom of the container like here
the HTML:
<div class="container" ng-init="getCartItems()">
<div class="hidden-xs">
<div class="">
<div class="title">סיכום הזמנה</div>
</div>
</div>
<div class="row">
<div ng-include="'templates/cart.html'"></div>
<div class="subTotalTabs">
<div class="col-md-3 col-xs-12">
<ul class="list-unstyled text-center">
<li>הוספת מבצע</li>
<li><a ng-click="addToCart()" class="clickable btn btn-lg borderBox padTop5 padBtm5 f22">הוספת פיצה</a></li>
<li>הוספת שתייה</li>
<li>מוצרים נלווים</li>
<li><a ng-click="clearCart()" class="my-btn-sqr my-btn-sqr-danger padTop5 padBtm5 f22">רוקן עגלה</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /row -->
</div>
How can I fix this? Thanks!
`
I have list that I render with semantic-ui and it needs some margin to the top for the first element. I looked in the CSS code and I see margin-top:0!important and I can override it for the first element with margin-top:10px!important; and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">All
</li>
<li class="nav">Company
</li>
<li class="nav">Private
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<div class="ui divided items">
<div class="item">
<div class="ui left floated">
7 July.
<br>3:33
</div>
<div class="image">
<a href="/vi/5022701123010560.html">
<img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5022701123010560.html">Wordpress development company, website developer</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Dit Interactive have experts wordpress ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Central NJ</div>
<div class="ui label">New Jersey</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
7 July.
<br>0:54
</div>
<div class="image">
<a href="/vi/5870511561113600.html">
<img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5870511561113600.html">Dentist in Westminster</a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Pari J. Moazed, DDS is a family dentist ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Baltimore</div>
<div class="ui label">Maryland</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
This "solution" works, but I don't like it
<div {% if loop.index0 == 0 %}style="margin-top:10px!important"{% endif %} class="item">
By the looks of it I would personally just change the margin on the with the simple line:
.container .nav{
margin-top:10px;
}
Does this answer your question? (I know it looks too simple to be true)
I would suggest adding a custom class to <ul class='nav nav-tabs'>
<ul class="nav custom-class nav-tabs">
and adding margin-bottom to it
.custom-class{
margin-bottom:20px;
}
We are adding a custom class to unordered list <ul> so that changes made to it doesn't effect other elements which are using nav class
On your div.tab-content try adding class ui basic segment
I know it is waaay overdue, but I came across this thread when looking for the same issue in Semantic UI React. My solution was to add a divider above the first container:
<Divider hidden></Divider>
My main goal is to create a btn that play/pause the song on my wedding site.
I got it to work on the desktop view port, but not on the phone.
Notice the play btn on the far right, when clicking on it, it will play the song, the icon will toggle to pause, like this
So far so good, everything work perfectly fine.
Here come the issue, here what it look like on the 400px
I see it, but, they're not clickable at all.
I tried to inspect it, this is what I see.
I was thinking that I had the issue with z-index, I've tried to give one to my btn, but it still doesn't work.
I'm a little stuck now, please feel free to give me any suggestions.
HTML
<!--Header start -->
<header>
<!--menu start-->
<div class="menu">
<div class="navbar-wrapper" id="navbar">
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music">
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
</div>
{{-- Music --}} -------------------------------------------------
<div class="container">
<!--Logo -->
<div class="logo">
<img id="logo" src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="logo_phone hidden">
<img src="/img/love/logo_pink.png" alt="Roth-Long-Wedding">
</div>
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navArea">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navigation">
<li class="menuItem" id="home">Home</li>
<li class="menuItem">Count Down</li>
<li class="menuItem">Couple</li>
<li class="menuItem">Events</li>
<li class="menuItem">Gallery</li>
<li class="menuItem">Accommodation</li>
<li class="menuItem">RSVP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
</div>
</div>
</div>
<!--menu end-->
<!--video header start-->
<div class="banner row" id="banner">
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 noPadd slides-container" style="height:100%">
<!--background slide show start-->
<div class="slide into_firefly">
<!--header text1 start-->
<div class="container hedaer-inner ">
<div class=" bannerText clearfix ">
<h1>Long & Roth</h1>
<h4>WE ARE GETTING MARRIED</h4>
<p class="ruler"><span></span>
<a class="pause_audio_btn hidden"><i class="fa fa-pause"></i></a>
<a class="play_audio_btn"><i class="fa fa-play"></i></a>
<span></span></p>
<h4 class="date long">July 26th, 2016</h4>
<h4 class="date short">-07.26.2016-</h4>
</div>
<p class="downArrow"><i class="fa fa-chevron-down"></i></p>
</div>
<!--header text end-->
<img src="/img/love/main/edit/retina.jpg" alt="Main Image">
</div>
<!--background slide show end-->
</div>
</div>
<!--banner end-->
</header>
<!--Header end -->
Remove the part where you have set the logo to z-index: 9999
Then add this to your css
.navbar-header button{
float:right;
}
It is a z-index issue, but z-index is tricky and only works when the elements have a position other than static (which is default).
{{-- Music --}} -------------------------------------------------
<div class="pull-right btn-music" style="position:relative; z-index:99">
...
</div>
{{-- Music --}} -------------------------------------------------
<div class="container" style="position:relative; z-index:98">
...
</div>
(I put the styling inline for clarity)
There are likely other way to fix this, but this was the quickest.
Pull the button outside of .navbar-wrapper and put it as the first element under .menu
That'll work :)
Dropdown1 and Dropdown2 must float to right. Paging must be to the right.
Paging content may reduce and dropdown1 and 2 must adjust accordingly. I tried different ways but unable to get the solution. In mobile device all the three divs must be centered.
We are using bootstrap. Divs are as follows
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<!-- Title -->
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 alpha omega">
<div style="float:right">
<ul class="nav">
<li class="dropdown">
Drop Down 2<b class="caret"></b>
<ul class="dropdown-menu " style="text-transform:uppercase;">
<li data-filterkind="$p" data-filtervalue="DESC">
<a href="./" >1</a>
</li>
<li data-filterkind="$p" data-filtervalue="ASC">
<a href="./" >2</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="pull-right">
<!-- Drop down 2 -->
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<div style="float:right" >
<!-- Pagination -->
</div>
</div>
</div>
Please suggest
So like this?
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 text-center heading1">
<p> Heading </p><!-- Heading -->
</div>
<div class="col-sm-6">
<div class="row">
<div class="float text-center">
<div class="col-sm-4">
<p> DD1</P><!-- Drop down 1 -->
</div>
<div class="col-sm-4">
<p> DD2</P><!-- Drop down 2 -->
</div>
<div class="col-sm-4">
<p> PAGINATION</P><!-- pagination -->
</div>
</div>
</div>
</div>
</div>
</div>
Then add the following additional stuff to your custom CSS:
#media (min-width: 768px)
{
.float
{
float: right;
}
.heading1
{
text-align: left;
}
}
FYI - The above is bootstrap, but the additional classes are needed to get the custom result you want.