I'm trying to figure out the horizontal version of https://stackoverflow.com/a/25298473/7835535. Instead of having the content scroll vertically, I want the content to scroll horizontally.
Fiddle taken from the original post
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
<span class="pull-right">
<ul class="nav panel-tabs">
<li class="active">Tab 1</li>
</ul>
</span>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="test">
CONTENT
</div>
</div>
</div>
</div>
</div>
Here You go Fiddle: http://jsfiddle.net/51n56p94/
You need to add this css
.tab-pane{
width:1000px;
}
.tab-content{
overflow-x:scroll;
}
Related
I added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
I have a sticky top-bar, ie something like:
<div id="main-navigation" class="top-bar-container" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
<strong>My Brand</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
And now I have a row that I want to stick to it, but it does not work properly (it sticks to the top of the page when I scroll):
<div class="filter-row row" data-sticky-container>
<div class="sticky column expanded" data-sticky data-top-anchor="main-navigation:bottom">
</div>
</div>
P.S.: the main-navigation sticks properly.
Hi so I am using foundation to create a navigation bar and would like to achieve the effect seen in the photo where the logo box overlaps the content below it however currently it is expanding the height of the whole navigation bar and not just the logo section.
What I would like it to look like:
What it is looks now:
HTML
<div class="row">
<div class="logo large-3 columns">
<ul class="menu">
<li class="menu-text"><?php bloginfo('name'); ?></li>
</ul>
</div>
<div class="large-9 columns">
<div class="large-12 infobar ">
<div class="hide-for-small-only hide-for-medium-only row">
<div class="large-3 info_numbers columns grey info_padding">
20°C
</div>
<div class="large-2 columns info_numbers info_padding no-padding grey "> <i class="fa fa-phone icon-padding"></i>018803 294110</div>
<div class="large-4 columns smaller-font info_padding grey no-padding"><i class="fa fa-envelope-o icon-padding"></i>STAY#GROSVENORHOUSEHOTEL.CO.UK</div>
<div class="large-3 columns no-padding text-right">
check availability
</div>
</div>
</div>
<div class="row ">
<div class="large-12 header_info">
<header class="no-padding top-bar-item " role="banner">
<!-- This navs will be applied to the topbar, above all content
To see additional nav styles, visit the /parts directory -->
<?php get_template_part( 'parts/nav', 'topbar' ); ?>
</header> <!-- end .header -->
</div>
CSS
.logo {
background-color: $secondary-color;
min-height:10em;
position:relative;
z-index:99;
}
Give .logo a position of absolute instead of relative, and give it an explicit height and width.
I am trying to use bootstrap panels with bootstrap tabs. It works fine when one panel is in a tab, but as soon as I stick another panel in the tab, the tab functionality breaks:
<ul class="nav nav-tabs" role="tablist">
<li class="active">Contact Information</li>
<li>Lead History</li>
<li>Client History</li>
</ul>
<div class="tab-content" style="margin-top: 2em;">
<div class="tab-pane active" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">Contact Information</div>
<div class="panel-body">
<div class="well">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Open Tasks</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div class="tab-pane" id="lead">
<h1>Hello World</h1>
</div>
<div class="tab-pane" id="client">
<h1>Hello World Again</h1>
</div>
</div>
Here is the demo showing how the tabs break:
http://www.bootply.com/oCwV3bLFQl
As soon as you remove the second panel-default in col-md-4 class, then the tabs work again. How can I have multiple panels within a tab and have the tab continue to work?
Your last two .tab-pane divs were outside of the .tab-content div. Edited fork: http://www.bootply.com/WI7OzQ0nqu
Is there any way to keep a CSS only modal from jumping to the top of the page?
<a href="#modal-1" />MODAL LINK</a>
<div id="modal-1" class="modal">
<div class="modal-content">
<div class="header">
<i class="fa fa-times-circle fa-2x"/>XX</i>
</div>
<div class="copy">
<p>CONTENT GOES HERE</p>
</div>
<div class="cf footer">
</div>
</div>
<div class="overlay"></div>
</div>
Use href="javascript:void(0)" instead of href="#"