Here is my code for a fixed header.
<?php } ?>
<header id="header" class="<?php if ( theme_option( THEME_OPTIONS, 'enable_header_fixed' ) == 'true' ) : ?> fixed_header <?php else : ?> relative_header <?php endif; ?>">
I would like to incorporate CSS to disable fixed on mobile. My website is 780webdesign.com if you need to view source. Thanks much.
EDIT: Still not resolved
If you want to make the header "no longer fixed" but still visible, you can put it back to the default value, which is static.
/* To revert a fixed element to the default position */
.fixed-header {
position: static;
}
Currently you're telling it to not display at all. You'd want to adjust the position of the element. So you would do something like this:
#media screen and (max-width: 767px) {
.fixed-header {
position: relative;
}
You may have to add some additional properties to fix positioning but that would be a good start.
EDIT:
After getting linked to the site, and taking a look this is what you would want to use.
#media screen and (max-width: 767px){
.fixed-header{
position: relative;
margin-bottom: -270px;
}
}
You have inline styles which are going to cause issues with your classes, so you need !important on anyhting you use to overwrite them. The following will resolve you issue from what I see:
#header.fixed_header {position: relative !important;}
#page {margin-top: 0px !important;}
This code just needs wrapping in a css media query to set it to happen at what your preferred widths are.
Related
This is the website I'm working on http://www.jokerleb.com/ and I'm using this https://responsive.menu, the free version. it will appear on devices 400px and smaller.
How to split its columns into 2 like so?
Don't know how to edit the CSS to make it look right, if it's possible in the first place.
Adds these lines to your code :
#media screen and (max-width: 400px){
#responsive-menu-container{
width:100%;
}
#responsive-menu {
display: flex;
flex-wrap: wrap;
}
#responsive-menu li{
width:50%;
}
}
It works for me.
You'll want to use media queries, so something like this should do it for you:
<style>
#media screen and (max-width: 400px) {
#responsive-menu-container li.responsive-menu-item {
width: 50%;
display: inline-block;
}
}
</style>
Note that you may need to play around with this CSS a little, since widths will vary based upon padding, margin and the display type. If you provide a sample of your CSS (or better yet a fiddle) I can help you more exactly.
The lines above make it look like this once the category button is clicked:
If you'd prefer the thing go the whole width, include this in your #media option as well:
#responsive-menu-container {
width:100%;
}
i have a padding problem that only affect mobiles.
the reason for this issue is some how known, but how to fix the the issue without affecting the computers preview.
here is the suspect
.entry-content,
.entry-summary {
margin-top: 20px;
max-width:1000px;
width: 100%;
float: none; /* i don't know if this affect any thing */
**float: none!important;**
**padding-left:150px !important;**
}
here a preview from the desktop so you can understand the reason behind the padding.
it looks like that padding in a general setting or so.
so what can be done to the solve the problem?
re-allocate the padding line to more specific function ?
or something else.
It seems you identified the problem yourself. The padding is applied in the mobile page.
A fix would be to use a media query to find out if the user is viewing on a desktop. If he is, add the padding to the element.
first remove the padding from the main styling of the element
.entry-content,
.entry-summary {
margin-top: 20px;
max-width:1000px;
width: 100%;
float: none; /* i don't know if this affect any thing */
**float: none!important;**
}
and add something like this to your stylesheet
#media only screen and (min-width : 1224px) {
.entry-content, .entry-summary {
padding-left: 150px;
}
What this does is only applying the padding-left if the screen's width is larger than 1224 pixels (so a desktop, basically).
A better solution though, would be to change the elements so the left-padding is not needed to position the text right. But this is an HTML issue and I don't have enough information to help you with this.
I've got a Wordpress site using WooCommerce, and I've got a plugin that isn't working how it should. So, I managed to find a particular line in the PHP code that triggers when I need it to do something my way. Problem is, I need to change some CSS styling within the PHP code.
How exactly would one do something like this?
<woocommerce class="a.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
<woocommerce class="button.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
Mind you that code above is incorrect. It is just an example of what I'm trying to achieve.
As for a more detailed breakdown, I'm trying to change/override a CSS style that already exists on my web page. Overall, the trick is to change some CSS style that already exists into doing something else. The CSS for the item I found (from Firefox's HTML debugger/inspector) is:
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt
And I need it to apply these styles instead:
background: #FF8282;
pointer-events: none;
If you need more information, just let me know.
Thank you.
I think that adding an !important behind would do the trick.
{ background: #FF8282 !important; pointer-events: none !important; }
Also, make sure u only link this after all other css occurences.
Would this help?
SOLVED
I included in the logic that was tripping some PHP code:
include '/wp-content/themes/my_theme/400.css';
And that CSS file (400.css) contained:
<style>
.woocommerce a.button.alt { background: #FF8282 !important; pointer-events: none !important; }
</style>
Thank you everyone for your help. Much appreciated.
Have you tried adding !important at the end of your css line ? This will force your new property to overide the one from your plugin :
background-color : red !important;
I guess something like this is your looking for. Just comment if you want modification.
$('button').click(function(){
$('div').addClass('changed');
});
.woocomerce{
background: cyan;
}
.changed{
background: #FF8282;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change CSS</button>
<div class="woocomerce">
Hello World
</div>
A guy did a website for me and I'm trying to understand it. It's here:
http://www.brilliantzenaudio.com
Note that there's a logo image at the top left. I'm trying to understand where this came from. The relevant code seems to be partly in header.php and partly in app.css. From header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-2">
<h1 class="logo"><?php bloginfo('name'); ?>">Brilliant Zen Audio</h1>
... stuff removed here, other items in header ...
</div>
</div>
</div>
</header>
And the app.css contains lines as follows. Looking at the php above, I see that there is a element of class "banner", so clearly there is css code addressing that (giving it a color, a position, border, and z-index). I also see that the header tag is also given the "role" of "banner". Does that serve any immediate purpose or is that for screen readers?
We can also see that the php contains h1 elements, and 'a' elements within 'h1' elements. CSS entries are there for those things. I'm not clear on what their purpose is. For one thing, the logo is an image. Why is it put in an h1 tag? I understand the need for the tag because the logo should be clickable (to get back to the home page). But what is put as the text of the link is some next (I'm not clear on how to parse the PHP there. What's clever is that the image gets put there because it's the background in an "h1.logo a" css entry.
I've added some general questions in comments below.
.banner { }
header.banner {
background:#603913;
position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
border-bottom:solid 1px #fff; // question: is this bottom border important for some reason?
z-index:9999; // what does this do?
}
h1.logo {
margin:0; // is there a need to define these on h1.logo?
padding:0;
}
h1.logo a {
display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
text-indent:-9999px; // what is this?
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // what does it mean when you set the width and height of an <a>
height:103px;
margin:0 auto;
}
.banner { }
header.banner {
background:#603913;
position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
border-bottom:solid 1px #fff; // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
margin:0; // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
padding:0;
}
h1.logo a {
display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
text-indent:-9999px; // The text-indent property specifies the indentation of the first line in a text-block.
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // Sets the width of this a, because it is a block element.
height:103px;
margin:0 auto;
}
Whilst this isn't necessarily an answer as Veelen's response hit the nail perfectly on what each element does, but below is a screenshot of Google Chrome's Web inspector (Or Firebug for Firefox). Hover over any DOM Element and it'll tell you everything about it, click the CSS rules and modify anything on the fly.
Experiment with it, see how things look & feel and it's constructed. It's how most Developers test & see how changes would look without having to Code/Re upload, and whatever you touch & change during Web Inspector, aren't saved =)
I am trying to display a banner on a report while printing but it doesn't print. What I did was I set the display status to display:none in my regular CSS
#transfer_head2
{
display:none;
}
and I changed the display status to display:block in my print CSS
#transfer_head2
{
display:block;
}
but this is not working. Why? Can anybody help me?
Check the ordering of your CSS files and the media defined. Your print.css should come last so that it can override any CSS with media=all. Using Firefox with the Web Developer plugin you can change the CSS in your browser to display as if it were print media. You might want to try that in conjunction with the inspection facilities of Firebug to see what CSS is being applied from where.
Maybe your display: none is overwritten by another property later defined. Try !important
display:block !important;
Is #transfer_head2 a TABLE? If so, you need to use:
#transfer_head2 { display: table; }
Is it a TR?
#transfer_head2 { display: table-row; }
Is it a TD or a TH? Then it's the following:
#transfer_head2 { display: table-cell; }
Note that those are not supported in IE6 or lower. In which case you might want to use something like the following:
#media screen {
#transfer_head2 { height: 1px; width: 1px; overflow: hidden; visibility: hidden; }
}
#media print {
#transfer_head2 { height: 60px; width: 468px; visibility: visible; }
}
EDIT: I forgot to specify this in my original post but keep in mind that most browser configurations have background printing disabled by default, so if you have something like the following in your CSS:
#transfer_head2 { background-image: url('../image/print_banner.jpg'); }
it will not print no matter what the display mode. If you have control over the user's browser configuration, this is a non-issue, but in most cases, you will want to use an IMG tag for your banner.
Make sure the container divs (if any) is not hidden
Check the generated source with web developer toolbar to see the inherited properties of the div.
Without seeing the code of #transfer_head2 it's hard to tell, you should paste it into your question.
One possible reason could be that you have made the banner a background for #transfer_head2 element, and browsers are usually set not to print backgrounds by default.
EDIT: ugh, Andrew has covered that already...