I'm trying to customize the theme I'm using (biancaa) by changing the CSS of a child theme. I've been at it for a few hours (tinkering using inspect element) and have had no avail. Any advice would be greatly apprecciated.
I would like to completely remove the left and right padding so that the black line on the bottom of the menu extends to the edges of the screen, and the post fills up 95% the entire page width
I would like to get the menu to stick to the top when you scroll down
The site:
http://www.anniekip.com/
Screenshot:
try this
Open the following files
http://www.anniekip.com/wp-content/themes/biancaa/style.min.css
http://www.anniekip.com/wp-content/themes/biancaa/style.css
And look at the whole file with the following class
.site
Set the padding always well
padding: 0;
You won't be able to do this purely in the css. You will have to edit the html for each theme template to remove the nav out of the wrapping container, and then edit some of the css to display the nav correctly.
Add css on style.css file
.container {
max-width : 100% !important ;
}
.site {
max-width : 100% !important ;
padding :0 !important
}
Related
I created a landing page with Wordpress and I inserted this basic HTML code at the bottom of it :
<p> שיווק דיגיטלי createak כל הזכויות שמורות</p>
I apologize for the foreign language. :-)
I have always used this code, but for some reason now it's unclickable on this specific landing page: http://mickeyberkowitz.com/.
I have no idea why it's happening, any suggestions?
It looks to me like a CSS rule is making the container element for the final section (footer?) fixed, since there is no rule to hide the overflow-y the images show up fine however, the link is actually behind those images.
The CSS rule below fixes the container to 100vh however the content inside the container is much "taller" and so that overflows down. Your link is positioned directly under the parent element of the container and because the height of the offending container is fixed, it doesn't move down.
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
height: 100vh;
}
If you changed that CSS rule to the one below you'll see an improvement:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
min-height: 100vh;
}
You will then notice the large space between the bottom of the "trophy" image and button - this appears to be a "spacer" element probably created by a page-builder plugin. I'd remove this if I were you. In fact, there appears to be another spacer below that as well, these create blank space that you may want to remove - depending on the desired aesthetics of the site.
I checked in your site. This is because, in your code other divs and elements are show over <div id="footer-bottom">
You need to add following code in CSS
#footer-bottom{
z-index:9999;
position:relative
}
This is a quick Fix.
But this may make other things non-clickable. So you need to adjust all your html divs and code properly with CSS.
Please use google chrome or firefox developers tool or inspect your code and fix divs that are overlapping each other.
Unable to remove the bottom space for the Bootstrap Navbar. When I go to inspect element, I can see that space is produced by the Navbar.
On changing the
margin-bottom: 0px;
It got fixed on the screen, but when I get to change the same property in the bootstrap.css file. It is still showing the space below the navbar.
I am not sure what is the problem. It has already consumed much of my time for trying different solutions, but I got no success so far.
Load you custom css file after loading bootstrap.css. Then in your custom css file override the class (use the same selector as it is) and set the margin-bottom to 0. Avoid using !important (reference).
change min-height:50px; to height:auto;
I have a navbar with a z-index that is above/higher all other elements on a page, which means it is "ignored". Its height is not counted on the page.
Also, I am using Twitter Bootstrap as my website's foundation.
What happens when I try to redirect to an element with anchor tag. Example:
Go to ID
Part of the element I redirected to will get covered (covered element = navbar height) by the navbar since its height is not counted on the page.
I'm sure there is a fix to this with JS/jQuery but I would like to know if I can do it through just HTML & CSS.
Thank you. And please do ask for clarification if I did not address my question clear enough.
I used to use a small trick (I think it still works), just do:
<div id="mydiv" class="section-target"></div>
And the CSS:
.section-target {
margin-top: -40px ; // Change to your navbar height
padding-top: 40px ;
}
Have a look at the docs here: Bootstrap - Navbar fixed top
It recommends you adjust the padding of the whole body, to compensate for the height of the nav-bar:
body { padding-top: 70px; }
You can also use the static top navbar, which does not require the extra padding: Bootstrap - Navbar static top
I'm using the latest version of Bootstrap to style a site and I have come across what seems like a bug. You can view it here as a JSFiddle.
If I add a standard fixed-position top navbar and then some content after it, the subsequent content gets pulled up by about 60px so it ends up under the top navbar. So I looked at the Bootstrap examples pages and found a bit of inline CSS (in the head section) that is evidently being used to correct this:
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
This surprised me a great deal and I'm wondering if this is the result of an overlooked-bug in Bootstrap or if I should be doing this as a matter of course.
If the latter is the case, I'd be very interested to know why I should use inline CSS when Bootstrap is supposed to be a ready-to-go CSS solution.
And if the former, I'd very much like to know why this is as it is - why doesn't the Bootstrap CSS just add the padding to the bottom of the navbar or something?
From the documentation:
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
The .navbar-fixed-top is position: fixed, so a padding will not affect any other element.
EDIT
The "between the two .css" advice helps to prevent an issue with mobile devices. As position: fixed is broken on many devices, navbar goes static and the <body> padding creates a blank wrap on the top. So bootstrap-responsive.css overwrites this padding for that viewports.
You can reproduce that behaviour simply by adding a media query to the rule:
#media (min-width: 979px) {
body {
padding-top: 60px;
}
}
Include this rule on your custom stylesheet and forget <style> tags.
If you don't add a navigation bar, the padding is not needed. Bootstrap itself cannot know whether this is the case or not, so you need to put this small CSS bit yourself.
From the documentation:
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
http://twitter.github.com/bootstrap/components.html
Having issue with my navigation.
How can I prevent it?
My CSS file looks like that: http://pastie.org/2241255
My width is variable because of class "current".When some page is active, class current makes it's link bold (and increases navigation bars width). That's why i can't set exact width to #navbar. How can i center navbar with variable width and fill empty place (look at the right side of the image) with color?
My php file looks like that
http://pastie.org/2241292
THX in advance
Have you tried to modify your CSS to include a 100% width for your header? Assuming your header is the .sf-menu:
.sf-menu {
line-height:1.0;
width:100%;
}