I am using Bootstrap 2. Excited to upgrade to 4 eventually.
For now I have a site with a fixed top navbar. Looks great.
Now, I am working on some new pages pages. I will need the top navbar to NOT be fixed for these pages.
I have
body {
padding-top: 117px;
}
in my css as the navbar on top is integral to the site... but
How can I "negate" this body padding for 2 pages where the navbar won't be fixed?
I tried adding a css class
.negate-nav-padding {
margin-top: -117px;
}
but that did not work.
Thanks
Why not just give the body on those two pages an override class. Like this:
<body class="interior"></body>
body {
padding-top: 117px;
}
body.interior {
padding-top: 0;
}
One idea could be to add an id to body and just add these css rules:
body {
padding-top: 117px;
}
body#special-page {
padding-top: 0;
}
edit: or class for example: body.no-padding { padding-top: 0; }
Related
How do you make the position: absolute; position: relative; stay together but have an auto height
I am trying to make profile cards in the style of Discord (latest design). When trying to show both the banner and a banner color it isn't aligned correctly. If anyone could help me, please?
Screenshot 1
Screenshot 2
To debug I tried to use CSS data selectors (\[data-??='true'\])
.preview-card.pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
Yesm this will work but not for everything.
I think you have a space missing. Try this maybe:
.preview-card .pfp[data-prem='True'] img {
top: 85px;
}
.preview-card .pfp[data-prem='False'] img {
top: 50px;
}
NoRowsOverlay / overlayNoRowsTemplate position is out of ag-grid columns or overlapping headers
I found the solution!
I added this in CSS for angular 4 project.
:host >>> .ag-overlay-no-rows-wrapper {
padding-top: 5em;
}
In my case I had to style the ag-overlay class in my global scss styles. I removed the absolute positioning and added some margin for top and bottom:
.ag-overlay {
position: relative;
margin-top: 24px;
margin-bottom: 24px;
}
I am trying to make a header that is localized under a div. When you scroll and the header reaches the top of the page it should "stay" there. I am using Angular so I found this solution: Bind class toggle to window scroll event here and I am using it for adding the class fix-header. In the inspector I can see that the class gets added but the styling does not apply when it is added. Here is my CSS for making the header fixed:
.wrapper {
background-color: pink;
height: 100px;
z-index: 1;
}
.wrapper .fix-header{
position: fixed;
top: 10px;
}
The "fix-search" class is added here:
<body ng-app="myApp">
<div ng-controller="MyController">
<div class="banner">
<div class="dummy-container"></div>
<div class="wrapper" change-class-on-scroll offset="200" scroll-
class="fix-header">
</div>
</div>
</div>
</body>
The line change-class-on-scroll offset="200" scroll-class="fix-header" adds the class fix-header to the wrapper div.
Here is some working code: https://codepen.io/Martin36/pen/jmbEgJ
So my question is, why doesn't the class properties get applied when the class is added?
Why don't the styles get applied when the class is added?
Because you are referencing the wrong class, your CSS target should be:
.wrapper.fix-header{
position: fixed;
top: 10px;
}
Note no space between the wrapper class and the fix-header class
I incorporated the comment given by #Ronnie and the answer from #cnorthfield and made an updated pen: https://codepen.io/Martin36/pen/jmbEgJ, for those of you that are interested. The header now sticks to the top of the screen when the "dummy" div is scrolled past. The following changes were made:
/* Since the classes are on the same element there should not be a blank between them */
.wrapper.fix-header{
background-color: pink;
height: 100px;
/* Without the "width" the header disappears */
width: 100%;
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
To elaborate on cnorthfield's answer:
/*Apply style to all elements of both the wrapper class and the fix-header class*/
.wrapper .fix-header
{
}
/*Apply style to all elements which have both the wrapper and fix-header classes*/
.wrapper.fix-header
{
}
Notice how the addition/removal of a single space significantly changes the meaning of the selector.
I want the navbar to be at the top of the page. (Blogger, Simple Template).
As you can see, I switched the Blogger navbar to "Off".
Add this css code to blogger, either from Layout > template designer > Advanced > Add CSS
or
add directly to Template > edit HTML > b:skin just before ]]>
.navbar {
height: 0;
border: 0;
}
body .navbar{
height: 0;
}
Fix by html (add style="height:0")
<div class="navbar section" id="navbar" **style="height:0"**>
Fix by css:
body .navbar {
height: 0;
padding: 0;
margin: 0;
}
CSS-only fix
You have a div with an ID of navbar (<div class="navbar section" id="navbar">) that is empty and is taking up that space.
If you remove the div or set display: none; on the #navbar div, that space will be removed. Example:
#navbar {
display: none;
}
You will also need to change the margin of .content-outer, as that will create space too (the !important will enable this style to override any others applied to the element). Example:
.content-outer {
margin-top: 0 !important;
}
HTML-only fix (for .navbar)
(Now that the template screenshot has been posted), you can just remove the following code from the template as shown in the screenshot:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>...</b:widget>
</b:section>
How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.