Hi I'm stuck to customize this additional CSS in Wordpress.I use a theme called Poza Child and it's maximum width (100%) as the picture below. I wanted to make a responsive navigation bar that fill the screen.
As you can see here, there's a gap (black and grey). I wanted to make a responsive navigation bar (all black) just like the one below.
However because of the theme used, I have to add additional CSS to make it full-width and responsive to any screen size. This is my code snippet of the wordpress additional CSS.
#primary #content {
margin-top: 50px;
}
#header .nav-main {
background-color: #000000;
}
#header .nav-main .container {
width: 100%;
}
.heading {
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
}
I've tried to change it to negative value, in pixels (eg. -380px) but it's not responsive for tablets and mobile. How can I overcome this? Thank you in advance.
Thank you to everyone. I have found my solution. As you guys stated, it's the container that had been the problem.
It should be like this:
#header .container {
width: 100%;}
I just deleted the nav-main. Thanks all!
Related
This is my sidebar : https://jsfiddle.net/8ejwykwv/1/
The issue is that on small screens, sidebar completely disappears. Whereas what I'm trying to achieve is on a certain screen size, have only images displayed. example : Home icon without Home text. And on a very small screen have only a button that slides the sidebar left and right or top-down.
I tried using
#media(min-width:42em){
.sidebar{
width:4em;
}
}
But I'm pretty much lost.
I understand media queries and what can be done with them, but I'm not sure how to manipulate with my sidebar and topbar so that I have like fa-fa bars that on click will show more than just an image.
Link as a reference to what I have been trying:
This link and/or This example
Any help is appreciated. I'm a beginner so I apologize in advance if it may be simple thing. Any help is appreciated!
Just fix the width in sidebar class:
.sidebar {
position: fixed;
top: 50px;
bottom: 0;
width:160px !important;
left: 0;
z-index: 1000;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
border-right: 1px solid #eee;
background-color: black
}
Here is the fiddle https://jsfiddle.net/c8h5ede7/8/
EDIT
You can also try this solution
#media only screen and (max-width: 42em) {
.sidebar{
width:8em !important;
}
}
https://jsfiddle.net/c8h5ede7/12/
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
I recently got a Ning account. I want to customize the site a bit more using their "Add Custom CSS" option I would like the ning site to look as close to this site as possible. More specifically the green horizontal bar across the top of the page, and the location and spacing of the header group. I'm currently using the following CSS on the ning site but can't figure out how to make the green horizontal bar span the entire width of the page. Any help, advise or direction would be greatly appreciated.
.mainTab-item.active, .mainTab-item.active > a {
color: #00a6ed;
}
.site-header {
height: 0px;
}
.header-container {
margin-bottom: 15%;
}
h2.module-name {
background-color: #88C540;
color: #FFFFFF;
font-size: 16px;
margin-top: -15%;
max-width: 100%;
padding: 30px;
text-align: center;
text-shadow: 2px 2px 0px #609F16;
}
Here is the Commonly used CSS classes and HTML (ning.com/ning3help/commonly-used-css-classes-and-html)
The problem here is that your container has a width of 960px which the green bar is included inside. Therefore when you set max-width or width of 100% it is relative to the container. E.g. 100% of 960px is 960px.
The only way around this would be to change the mark-up and take it out of .container in order for the percentage to be relative to the document.
Or another option is to absolutely position the div to take it out of the document flow. But I strongly do not advise that.
I've been staging up a site and building the basic layout when I ran into a little problem. I want to create a "notched" navigation, but I don't know the first thing about doing this.
I've tried to create a to be positioned below my (with the idea that I could either create [with CSS or using an image] a white triangle) that could be aligned with the bottom of my creating the "notched" effect. I've yet to be successful with this and was hoping someone with css // html wizard status skills could be of assistance.
ps. If you need more info just let me know - I'm a bit new to stackoverflow
Make your NAV LI tags & the A tags within them stretch all the way down to the top of your content block.
When an LI is the 'current' tag then place a triangle graphic as the background of the A tag within it.
li.current a {
background:url(triangle.png) no-repeat center bottom;
}
You'll probably want the triangle to be blue the same as the blue bar at the top of the content block.
Cappuccino is using the following css to mark the link tag.
<style>
#navmarker {
width: 1px;
height: 0;
position: relative;
margin-top: -0.7em;
margin-left: auto;
margin-right: auto;
border-bottom: #FFD48E solid 0.8em;
border-top: none;
border-left: transparent solid 0.8em;
border-right: transparent solid 0.8em;
}
div {
display: block;
}
</style>
Try to create a div and use the above css it worked for me.
<div id="navmarker"></div>
I'm trying to display an image centered on a page with a border that should have different paddings and margins on it's side. The images will be of different widhts and heights. So I need it to stretch accordingly.
I put this in the body to remove all margins:
body {
margin:0px 0px;
padding: 0px;
}
Then I used this to put the border around the image.
#imgcontainer {
position:relative;
text-align: center;
border-color: red;
border-width: 1px;
border-style: solid;
padding: 5px;
}
But then the border stretches all across the with of the page. Is there any way to prevent his? If I put:
position:relative;
The border snaps into place but then the image is not centered anymore.
If I put a container box around #imgcontainer it also snaps to the edge of the page.
I think it can be solved simply with some combo of position:relative/absolute?
This is what I'm talking about: http://kareldc.com/dislexicon/1-motion.html
Thx!
Hi now define according to #Fabrizo Calderan
css as like this
#imgcontainer {
display:inline-block;
vertical-align:top;
}
than your result is
If I well understood the problem you could assign display: inline-block to #imgcontainer, otherwise post a fiddle showing the issue
you can just apply the border effect to the img tag alone.
for example, just put
#imgcontainer img {
border-color: red;
border-width: 1px;
border-style: solid;
}
Here is an answer for you: fiddle example