I started a blog. I'm new to coding and I want to transform my Search menu into a full overlay search menu. But for mobile devices, I only want something like this:
And I don't really know, should I make a brand new search menu only for mobiles, or edit that one with resizing and other stuff?
I'm working on WordPress, and I know that there are plugins for this work, but I want to learn how to do it by myself. Not only that, but coding as all. And yea, I know it's bad, but it's my first one! :) So any suggestions would be really appreciated.
My blog link:www.shreddingnation.com
I really don't know which code to paste, and if there is even any need to paste code, so if you want me to paste anything, just say what. THANKS!
One way to do that is to use Css Media Queries. So in this case at a width <= 600px there will be a full search overlay.
1) Add the following css to wp-content/themes/yuuta/style.css
#media all and (max-width: 600px) {
.site-header .search-form.search-form--active {
position: absolute;
top: 80px;
left: 0;
width: 100%;
background-color: #fff;
height: calc(100vh - 80px);
}
.site-header .search-form input.search-field {
border: 1px solid #000;
color: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
2) Add the following js to /wp-content/themes/yuuta/assets/js/theme.js
after /* hide search field */ add
$('body').css('overflow','auto');
and after /* show search field */ add
$('body').css('overflow','hidden');
Hope this helps...
Related
I created a starry night animation but was wondering if anyone had a better way to place divs "randomly" with only CSS ??? Also, I'm having difficulty with responsiveness as well. Thank you for your time! just trying to learn.
check the complete code at http://codepen.io/anon/pen/MeeYWO?editors=1100
#star-bl:nth-of-type(5) {
left: -350px;
top: 225px;
}
#star-bl:nth-of-type(6) {
left: 750px;
top: 250px;
}
#star-bl:nth-of-type(7) {
left: -450px;
}
#star-sm:nth-of-type(8) {
left: -225px;
}
#star-sm:nth-of-type(9) {
left: 500px;
}
#star-sm:nth-of-type(10) {
left: -100px;
}
It's not possible in pure CSS at the moment (I'm hoping for calc(rand) to become a thing). The solution you are using is as good as any, you may want to consider using percentages if you want the stars to cluster on a smaller screen type.
Unfortunately that is not possible at the moment in CSS.
However, if you would be willing to change from CSS to LESS, you could give your stars random values. It's possible to insert JavaScript into LESS by wrapping the JavaScript expression with back-ticks as shown in this post.
Here's an example for giving your div #star-bl a random left value from 1 to 100.
#star-bl {
#random-margin: `Math.random() * 100`;
left: #random-margin * 1px;
}
You would still need to give every star a separate block inside the LESS file, but it would give your stars different positions every time you visit the page.
Here's a link to a guide for using LESS.
Not with vanila CSS but you can use a CSS pre-processor such as Less or Sass to generate random numbers for you at compile time.
Here's how you could do it in Sass using its random instance method.
#import compass
body
background: black
.star
width: 10px
height: 10px
position: absolute
font-size: 10px
color: white
#for $i from 1 through 500
.star:nth-child(#{$i})
top: random(1000) + px
left: random(1000) + px
DEMO: http://codepen.io/moob/pen/dXXGdy
I'm creating this site using the dazzling theme and everything seems to work fine except the header.
Have added these code lines to my css and it works fine for the homepage as you can see.
position: fixed;
z-index: 99;
width: 100%;
However, when you visit any other page or blog post, the header is messed up. Can you please provide a solution.
Another problem is, on the home page carousal, I need to add a few more lines to the blog excerpt (Art brings faith to life. This blog....). Can it be done via CSS?
Solved both the problems:
Adding a single line top:0; did the trick. Thanks to the community for helping out.
It seems, the problem was with the default WP excerpt which is 55. Used a single function in the functions.php file which did the trick. Have mentioned it below if it might be a help for others.
/* New excerpt length of 120 words*/
function my_excerpt_length($length) {
return 70;
}
add_filter('excerpt_length', 'my_excerpt_length');
You can change the 70 to anything you like :)
For your first problem The menu having the problem because you set margin-top for your content id.
Keep this as it is if you need to have, make change in you css
style.css line 612
you have to
.navbar.navbar-default
{
leave other css as it is and change only
position: fixed;
top: 0; /* This one you miss*/
and remove margin
}
For second thing you can increase the width or give height to your blog excerpt div.
in flexslider.css at line 98
just add top:0 in this css rule .navbar.navbar-default
.
navbar.navbar-default {
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: 200;
margin-bottom: 0;
margin-top: -2px;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
So, Ive come across a problem that I can't seem to figure out the cause of.
I have a few CSS files:
1) styles.css - contains most of the webpage's styling.
2) overlay.css - contains the styling for my overlay.
3) media.css - contains all the media queries.
So far, everything works great and my page acts responsively. However, for some reason, I can't make media queries work with my overlay. Here is my CSS for the overlay in the file overlay.css:
#aboutus {
position: fixed;
background-color: white;
left: 50%;
top: 50%;
width: 800px;
height: 450px;
margin-left: -400px;
margin-top: -225px;
border-radius: 20px;
z-index: 9999;
}
Here is my media query in media.css:
#media screen and (max-width: 700px) {
#aboutus {
background-color: red;
}
}
At the moment this query has no effect whatsoever. The weird thing is, if I put the query under the code in overlay.css instead, it does work 100%.
Why is this so?
Thanks.
How do you load your css? Your media css should be on last after styles & overlay.css
I would like to use Disqus comments system as a guestbook on a wedding website based on a bootstrap/html5 template.
Since the content on the website is personal, i would like to remove the share links for Facebook, Twitter etc which appear above the comments box and below each individual comment.
Screenshot here, http://imgur.com/pkvUSoF
Is there a way to achieve this by hiding the share elements in CSS ?
I understand the new Disqus uses an iframe, however there is a similar thread for hiding the Disqus footer linked here and the CSS code below does work.
#disqus_thread{
position: relative;
}
#disqus_thread:after{
content: "";
display: block;
height: 55px;
width: 100%;
position: absolute;
bottom: 0px;
background:white;
}
Using the 'inspect element' in Chrome, I am able to hide the share elements using 'display:none'
.nav-secondary>ul>li.share-menu {
float: right;
display: none;
}
and
.post-content footer .share {
position: relative;
display: none;
}
Could anyone help me with the correct code/syntax to add this to my styles.css to hide the Social Sharing buttons.
Thanks !
As described in the article its not possible.
https://help.disqus.com/customer/portal/articles/545277
Reason: Its using iframe to render the comments to prevent XSS
Even though i am not recommending you to do this but there is a way to do so.
Please read terms and conditions before doing any of this.
<div id="disqus_thread"><div>
<style>
.hide-social-discuss {
background: white; // change color according to your site back.
height: 20px;
position: relative;
width: 80%;
top: -60px;
}
<script>
//add this to script
$("#disqus_thread").append("<div class='hide-social-discuss'></div>")
</script>
Same CSS you mentioned, but adjusted to cover share buttons.
Please read disqus terms and conditions before using this.
disqus_thread {
position: relative;
}
#disqus_thread:before {
content: "";
display: block;
height: 20px;
width: 80%;
position: relative;
bottom: -72px;
background: white; //replace with your background colour
}
You won't be able to use featured comments anymore, but hey, it works
looks like this for me ¯_(ツ)_/¯
Im trying to do something, but I dont know if its possible.
I have a html structure for desktop and tablet devices and its working fine, but now for mobile, I want to change a little bit the structure of my news.
In mobile version I want to put my <h1>Title of the news</h1> above the image, but its appearing below the image, because in my html I have the title image first, but I dont want to change my html structure, its not possible to put my title above my image with only CSS?
Im trying some tests but nothing is working!
I put my example in this fiddle:
http://jsfiddle.net/Zkpj7/
For a better understanding, I have this images to show what I Want:
Try changing CSS like this:
#news
{
height:140px;
margin-bottom:5px;
border-bottom:1px solid #f3f3f3;
padding-bottom:43px;
position:relative;
padding-top: 45px; /*CHANGE VALUE ACCORDING TO YOUR NEEDS*/
}
#news h2 {
position: absolute; top: 0px; left: 0px; /*ABSOLUTE POSITIONING*/
margin: 0px;
}
#news span
{
color:#7a7a7a;
position: absolute; top: 25px; left: 0px; /*ABSOLUTE POSITIONING*/
}
I can't think of a good solution that would not use absolute positioning...
I really would suggest changing the markup though :p
http://jsfiddle.net/Zkpj7/9/
The CSS answers will all be less than ideal since CSS is for changing style not structure. I would recommend using jquery. Call this on the id's for the title and picture to reorder them.
$("#title").insertBefore("#pic");
If you want, add something like this to fire when the screen size gets too small (set whatever threshold you want).
$( window ).resize(function() {
if($(window).width() < 400){
$("#title").insertBefore("#pic");
}
});