I can't see how to make my menu repeat 100% out of the container, and still have the navigation menu center.
I want to ask to how to make a double border top and buttom on the menu.
Here is the design.
I hope someone can help me.
You wrote in the comments
more like repeat from left to right of the screen (browser) :), the
double border how can i make the one red and another green? cause now
the one is black :/
If I understand correctly, you can do this in your css stylesheet
nav {
position: relative;
background-image: url(../img/menu.jpg);
width: 100%;
height: 79px;
border-top: 3px double red; //CHANGE COLOR
border-bottom: 3px double green; //CHANGE COLOR
top: 15px;
z-index: 2;
}
Related
Wasn't sure how to word the title properly - basically I want to know how the fixed header div disappears behind the nav bar in this codepen.
http://codepen.io/Guilh/pen/JLKbn
Header code:
header {
height: 300px;
padding-top: 50px;
background: #f07057;
position: fixed;
width: 100%;
top: 0;
}
nav bar code:
.main-nav {
background: #fff;
height: 80px;
z-index: 150;
margin-bottom: -80px;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
position:relative;
}
How is that working? In contrast, my attempt is here:
http://codepen.io/Sasoon/pen/bVNVQv
Thanks so much!
Cast your .filler block as relative to make it above fixed block when scrolling and add background filling.
Here is your example modified:
http://codepen.io/anon/pen/YyPWpX
In the codepen1, they have used a script which will add a class to navigation when the page is scrolled. So the position will be fixed for the navigation once the new class is added (on scrolling down). If user scrolls page up, then the class will be removed. If you add the JavaScript that they have used, you can get the same functionality.
I want to have a shape under website logo but it needs to be continued from both sides by orange bars so it would look as a one piece. Here is the preview that I've created so far.
I'm stucked on this for hours. Please do you have idea how to accomplish that and keep it responsible? Thank you!
Here is how it should look like.
Set the background color of .test to the solid color in your background image, then position it properly. Lastly set the logo to position: absolute (don't worry it wont move unless you give it a position) then set the z-index: 2; to raise it above the squiggle.
(Demo)
.test {
position: relative;
background-image: url('//jumbo.elique.cz/img/navbar-bottom.png');
width: 345px;
height: 34px;
top: 64px;
background-color: #0b1b33;
}
.navbar-brand {
position: absolute;
z-index: 2;
}
Now this may cause the background color to cover up some of the busses in the background, to fix this you can wrap the nav in a 100px tall div with the same background-color, making this more uniform
(Demo)
.wrap {
background-color: #0b1b33;
height: 100px;
}
I have a problem with the menu of my store. If you enter my webpage, http://masluzz.panamerik.net/ you can see the menu on the top is colored in gray and orange, but when I change the resolution of the page the background menu moves to the right side. I don't know how I can view on all resolutions without moving the background. Here is the css thanks!
#sticky {
padding: 0.0ex;
width: 100%;
clear: both;
color: #transparent;
font-size: 2em;
border-radius: 0.0ex;
background: url(/img/layout/menu.png) 38.5% 0% repeat-y;
border-radius: 0.0ex;
position: relative;
top: -3px;
Do you want the orange to go all the way across the menu? Instead of a background-image you could just use CSS.
background: #FE6900;
If you only want half of the menu or w\e to be that color, you could add a class like "orange-bg" to the li's that you want.
try change the position to absolute.
position: absolute;
I have a div that has a variable width, depending on its content. I want to use it for a menu bar that slides in from the side of the page when the user clicks it, so it has to stick out. I want it to stick out exactly 16px (because the arrow image has that size), no matter how wide it actually is.
How can I realize that without using JavaScript?
EDIT:
Thanks for your answers! But it came to my mind that I could do it just like I did with the navbar on that site – modify the width instead of sliding it in.
See here: http://dev.mezgrman.de/tagwall/
The easiest way to do that is to add another class to your menu item when it is collapsed and set another width there and a text indent like so (instead of write again all your css in a new class)
.collapsed {
width: 16px;
text-indent: -9999px;
background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}
Now the only thing you have to do in javascript is to add and remove that class depending on the user's click. (You won't get rid of javascript. because css doesn't know when you click an element)
http://jsfiddle.net/LruWn/
No matter how long the .box is, it will always overlap the .container only by exactly 16px:
html:
<div class="container"><div class="box">text</div></div>
css:
.container {
position: relative;
outline: 1px solid red;
width: 100px;
height: 100px;
}
.box {
width: 70px;
position: absolute;
left: 100%;
margin-left: -16px;
outline: 1px solid black;
}
Add overflow: hidden; to .container to see how it might look like in action.
I solved my problem by modifying the width of my element now. Silly me.
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.