I have a menu bar like this
<header>
<nav>
Home
Our Story
Tools
Technology
Pricing
Contact
Careers
</nav>
</header>
The CSS is follows
header {
position: fixed;
width: 100%;
height: 65px;
opacity: 0.8;
background-color: #fcfcfc;
border-bottom: 5px solid #53bf6b;
z-index: 10;
}
header nav {
padding-top: 10px;
text-align: center;
}
header nav a {
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 26px;
padding-right: 20px;
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
And when the user resizes I want to Nav A to be followed below (align vertically) How can I do this ?
#media only screen and (min-width: 150px) and (max-width: 550px) {
/* I must set the code to arrange the nav a items here */
}
What should I do to make the nav a items follow each other vertically when resized ?
Use display block like there:
http://jsfiddle.net/c0y518bn/
#media only screen and (min-width: 150px) and (max-width: 550px) {
nav a {display: block;}
}
Fixed border-bottom version: http://jsfiddle.net/c0y518bn/1/
header nav a {
display: block; /* you can also try position:relative; */
}
Related
On woocommerce single product page, the default for gallery thumbnails appears under active image in rows. Currently for me it's displaying 4 images per row.
I believe Woocommerce uses flexslider for product page slider.
So since we are going to have lots of images for each product, I'm looking to add slider navigation to the product gallery while avoiding another plugin. As a result, the product gallery will then show all images on only 1 single row.
Like flexslider2
What would be the best way to achieve this? - Can it be done with pure CSS or would one need to add slider navigation using WordPress filters and CSS?
CSS
flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 5px 1% 0 0;
min-width: 100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: 0.8;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
Outer HTML from WC
<ol class="flex-control-nav flex-control-thumbs">
<li><img src="image.jpeg" class="flex-active" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
</ol>
// Add slider navigation using WordPress filters.
add_filter( 'woocommerce_single_product_carousel_options', 'cuswoo_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function cuswoo_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
return $options;
}
UPDATE
Here is CSS for the Navigation controls / for the Fliter above (next & previous image).
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;}
li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {visibility:visible;content: '\f105';
font-family: FontAwesome;margin-right: 10px;font-size: 70px; }
a.flex-prev::before {
visibility:visible;
content: '\f104';
font-family: FontAwesome; margin-left: 10px;font-size: 70px;}
to solve this you need to add a horizontal slider if thumbnails are many, and some more CSS grid code to make it responsive and spaced properly, I hope you find this useful.
.woocommerce-product-gallery {
display: grid;
gap: 10px }
#media only screen and (max-width: 35.999em) {
.woocommerce-product-gallery {
gap: 6px;
}
}
.woocommerce-product-gallery .flex-control-thumbs {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 17%;
gap: 1rem;
overflow-x: auto !important;
overscroll-behavior-inline: contain;
}
#media screen and (max-width: 47.999em) {
.woocommerce-product-gallery .flex-control-thumbs {
grid-auto-columns: 12.5%;
gap: 6px;
}
}
.woocommerce-product-gallery .flex-control-thumbs li {
float: none !important;
width: 100% !important;
display: grid;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
inline-size: 100%;
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
border-radius: 5px;
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
border: 5px solid #f2f2f2;
}
#media screen and (max-width: 47.999em) {
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
border: 2px solid #f2f2f2; }
}
.woocommerce-product-gallery .flex-control-nav {
-ms-scroll-snap-type: inline mandatory;
scroll-snap-type: inline mandatory;
scroll-padding-inline: 10px;
}
.woocommerce-product-gallery .flex-control-nav > * {
scroll-snap-align: start;
}
if you wish to also add the navigation the code is easy if need help I can assist
Cheers!
I'm currently setting up a sidebar menu for my Wordpress website. I'm running into 2 issues. The 1st one is that the text in the menu isn't lining up to the left side properly. I have tried to use the text-align attribute but it doesn't work.
The 2nd problem is that there is a bit of random space at the bottom of the menu that I don't know why is there.
Problem is happening here: http://dreamedbig.com/our-services/
My HTML/PHP:
<div class="page-content">
<div id="services-menu" class="services-sidebar">
<?php dynamic_sidebar('services'); ?>
</div>
</div>
The CSS:
#services-menu {
border: 1px solid black;
align-items: left;
float:left;
height: auto;
display: inline-block;
top:0;
left:0;
background-color: #BCE6FB;
}
#services-menu li{
list-style-type:none;
border-bottom: 1px solid black;
}
#services-menu a {
text-decoration: none;
color: #08203D;
}
#services-menu ul {
}
#services-menu ul li a {
position: relative;
display: block;
box-sizing: border-box;
z-index: 1;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
}
#services-menu ul li a::after
{
content: "";
position: absolute;
top:0;
left: 0;
background-color: #00A2DA;
width: 0%;
height: 100%;
transition: all 1s;
z-index: -1;
}
#services-menu ul li a:hover::after
{
width: 100%;
}
#services-menu ul li:nth-child(odd) a::after
{
background-color: #00A2DA;
}
#services-menu ul li:nth-child(even) a::after
{
background-color: #FFFFFF;
}
It looks like you have some inherited styles from classes called .widget and there is margin and padding added to ul. This is common is your using something like WordPress or underscores that come with some stylesheets.
I think these styles will correct it
.widget, #services-menu ul{
margin:0;
padding:0;
}
I found the unwanted margin and padding by using inspect in my chrome browser. I highly recommend it for frontend styling because it makes troubleshooting these kinds of issue easier to resolve.
Here is an article to better explain how it works
I'm trying to set up a nav button system where you either hover or click on the SVG ( which is but it as a separate php) then there will be button drop dop, but more like transparent button.
text with a clear background (no box or border). how do I do this?
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
#CSS Filters
CSS filters allow us to apply a whole bunch of cool, Photoshop-esque effects right in the browser. Filters are applied to the element after the browser renders layout and initial paint, which means they fall back gracefully. They apply to the whole element, including children. Think of a filter as a lens laid over the top of the element it's applied to.
You can change the opacity with the opacity filter opacity(<number-percentage>); .
and you can put this in a hover css tag
.navbar:hover {
filter: opacity(<number-percentage>);
}
And here is how you make a dropdown navbar:
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
here is the css to the navbar:
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
I'm using wordpress and the theme is Newspaper. I want to center the copyrights text but I don't know how. I have checked the theme panel settings and there's no options to edit that.
Theme panel pic:
I have gone through some answers in the web and they suggested adding codes in the editor but I'm not sure if it's the footer.php or style.css. If the latter, I managed to find the part regarding sub-footer:
Sub Footer
*/
.td-sub-footer-container {
background-color: #0d0d0d;
color: #ccc;
font-size: 12px;
font-family: 'Open Sans', arial, sans-serif;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container {
text-align: center;
padding: 6px 0;
}
}
.td-sub-footer-copy {
line-height: 18px;
margin-top: 8px;
margin-bottom: 8px;
}
/* Sub Footer Menu */
.td-sub-footer-container .td-sub-footer-menu {
float: right;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container .td-sub-footer-menu {
float: none;
}
}
.td-subfooter-menu {
display: inline-block;
margin: 0;
float: right;
/* responsive landscape tablet */
/* responsive landscape tablet */
/* responsive portrait tablet */
/* responsive portrait phone */
}
#media (min-width: 1019px) and (max-width: 1140px) {
.td-subfooter-menu {
padding-right: 40px;
}
}
#media (min-width: 768px) and (max-width: 1018px) {
.td-subfooter-menu {
padding-right: 48px;
}
}
#media (max-width: 767px) {
.td-subfooter-menu {
float: none;
}
}
.td-subfooter-menu li {
display: inline-block;
margin-left: 0;
}
.td-subfooter-menu li a {
margin-right: 16px;
line-height: 34px;
display: inline-block;
color: #ccc;
}
.td-subfooter-menu li a:hover {
color: #4db2ec;
}
.td-subfooter-menu li:last-child a {
margin-right: 0;
}
.td-subfooter-menu ul {
display: none;
}
Thank you for such depth! Here's some CSS you need to add:
.td-pb-span5.td-sub-footer-copy {
float: none;
text-align: center;
margin:0 auto;
}
The reason why you need this is because your subfooter is following some rules that are already established for the rest of your page:
.td-pb-row [class*="td-pb-span"] {
display: block;
min-height: 1px;
float: left;
padding-right: 24px;
padding-left: 24px;
position: relative;
}
Simply removing the immediately above CSS will 'break' the rest of your page's layout.
Edit, to answer comment question:
Apologies, here's a bit more information:
When CSS is being applied to an element that is already being styled by a different selector's rules, there's a calculation of specificity. The CSS I've given you will be fine on its own if added, however, if you'd like to add it to the selector you already have, .sub-footer-copy, then you'd have to add !important to override your already written CSS, like so:
td.sub-footer-copy{
float: none !important;
text-align: center;
margin: 0 auto;
}
This is because the selector .td-pb-row [class*="td-pb-span"] is more specific than the selector .sub-footer-copy. Here's some further reading on this:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, I'd like to note that the selector .td-pb-row [class*="td-pb-span"] is an attribute selector referring to a CSS class, so it is similar to .td-pb-row .td-pb-span
I have this code for my header.php
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<div class="desktop">
<a href="index.php">
<img border="0" class="logo" src="/images/logo.png" width="15%" height="20%" /></a> <font size="15%"><div class="BDtext">title<br> Description</font></div><br>
</div>
<div class="mobile">
<a href="index.php">
<img border="0" class="mobilogo" src="/images/logo.png" width="15%" height="20%" /></a>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li class="home">Home</li>
<li class="about">About</li>
<li class="me">About Me</li>
<li class="sessions">Sessions</li>
</ul>
Menu
</nav>
</body>
</html>
and this one in my style.css:
body {
background-color: #ece8e5;
}
.logo{
float: left;
}
.BDtext {
text-align: center;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Menu */
#sub-header ul li:hover,
body.home li.home,
body.Ben li.Ben,
body.about li.about,
body.sessions li.sessions { background-color: #000;} /* Current Page Background Colour */
nav {
height: 40px;
width: 100%;
background: #455868; /* Menu Background Colour */
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4; /* Hover Over A Page Background Colour */
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width : 600px) {
.desktop {display:none;}
.mobilogo{
margin-right: 45%;
width:50%;
height: 50%;
}
}
#media only screen and (min-width : 601px) {
.mobile {display:none;}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* End Menu */
my problem is.
my .mobilogo code in my CSS will not center the image.
I need this image to appear in the center of the page and not be aligned to the left.
please can someone help tell me what is holding it back?
.mobile class could have text-align:center; if you don't want to use the text-align try the below:
Also you can give .mobilogo width and have margin:0 auto; to center it.
.mobilogo{
margin:0 auto;
width:50%;
height: 50%;
}
In order for the width and height to work with percentages you need to give the parent elements width and height.
Make your .mobilogo class block and give it margin: 0 auto like this. Even though it has a width of 50% you'll have to make it a block element to center it with margin: 0 auto, or else you'll have to specify the width in pixels.
Like this:
.mobilogo {
margin: 0 auto;
display: block;
}