Skip to content

Instantly share code, notes, and snippets.

View SimonPadbury's full-sized avatar

Simon Padbury SimonPadbury

55 followers · 4 following
View GitHub Profile
@SimonPadbury
SimonPadbury / hovernav.css
Last active April 4, 2019 00:29
This is a simple supplement for Bootstrap 3 to transform the navbar so that the dropdown menu appears on hover instead of on click. No need to modify the Bootstrap 3 js or css at all – simply add this js and css below to your js and css files that are <head> linked *after* the Bootstrap 3 js and css files. Styles for both .navbar-default and .na…
/*
Navbar "hovernav" dropdown menu - this works only for screen sizes larger than phones.
The Bootstrap CSS is unchanged.
*/
@media (min-width: 768px) {
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
@SimonPadbury
SimonPadbury / really-simple-grid.css
Last active August 29, 2015 14:05
Really Simple Grid - HTML
/*
Really Simple Grid Sysrem
*/
.grid img {
max-width: 100%;
height: auto;
}
.grid {
width: 100%;
@SimonPadbury
SimonPadbury / meganav.css
Last active August 29, 2015 14:07
Simple supplement to Bootstrap 3 navbar. Allows GRAND-CHILD links to be displayed in a mega-menu format. If no grand-child links, then child links are displayed as normal.
/*
Meganav
*/
@media (min-width: 768px) {
.navbar-brand,
.navbar-nav .caret {
display: none
}
/* Delete the above if you wish to display the caret */
@SimonPadbury
SimonPadbury / toggle_anything.css
Last active May 21, 2018 09:08
toggle_anything.js
#your-thing-id.your-toggle-class {
/*
Any styling you like can go in here, for example...
*/
background: yellow;
}
@SimonPadbury
SimonPadbury / single.php
Last active January 1, 2016 17:47
WordPress: Using featured images (thumbnails) as hero backgrounds (1 of 2).
<?php $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="hero-background-image" style="background: url('<?php echo $hero['0'];?>') center top no-repeat;">
<!-- Put your loop <header> in here. -->
</div>
@SimonPadbury
SimonPadbury / style.scss
Created January 1, 2016 17:26
WordPress: Using featured images (thumbnails) as hero backgrounds (2 of 2).
.hero-background-image[style] {
height: 340px !important;
background-color: #888 !important;
background-size: auto 340px !important;
@media (min-width: 768px) {
height: 440px !important;
background-size: auto 440px !important;
}
@media (min-width: 1024px) {
height: 500px !important;
@SimonPadbury
SimonPadbury / bootstrap-4-nav-walker.php
Last active April 1, 2018 10:28
See accompanying blog post, http://simonpadbury.github.io/2016/03/09/bootstrap-4-navbar-with-dropdowns-for-wordwress.html
<?php
/*
Bootstrap 4.0.0-alpha2 nav walker extension class
=================================================
Add this to your `functions.php`
*/
class bootstrap_4_walker_nav_menu extends Walker_Nav_menu {
@SimonPadbury
SimonPadbury / sticky-note.css
Last active January 24, 2021 16:51
.sticky {
position: absolute;
right: 0;
z-index: 150;
transform: rotate(5deg);
width: 200px;
min-height: 150px;
margin: -10px 10px 10px;
padding: 10px;
font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
@SimonPadbury
SimonPadbury / container-responsive.css
Last active January 22, 2020 10:16
container-responsive class for Bootstrap 4
/* Responsive Container (because Bootstrap 4.0.0 doesn't have this) */
.container-responsive {
width: 100%;
max-width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@SimonPadbury
SimonPadbury / container-responsive.css
Last active June 18, 2018 10:18
Responsive container for Bootstrap 4
.container-responsive {
width: 100%;
max-width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar > .container-responsive {