I'm trying to change the navigation bar so that it opens from left to right instead of up and down.
I want the navigation bar to shift to the right when the menu is open.
How to do this ?
Modify your #navbar-collapse id on your css file as this: I moved your menu at the right adding "right:0" because is positioned as "fixed" and move the border on the left.
#navbar-collapse {
position: fixed;
top: 0px;
right: 0px;
float: left;
z-index: 1031;
width: 220px;
height: 100% !important;
border-left: 1px solid #000000;
border-top: 0px;
background: #ffffff;}
Related
I'm having trouble with my worpdress/bootstrap navigation to highlight current page.
I'm trying to find the best workaround, here is what's my method for now, but not working
Make bottom-border on link
Have a margin or padding or any kind of space on container and add background image at the bottom of it
unfortunately the image won't display as soon as it should overlap the border.
Do you have any quick fix or other approach for this ?
Maybe I thought in order to expand the container, is to fix both link and container height and have them placed how I want...
Triangle must be provided as absolute block. It can use :after.
Also for triangle you can use css(not image)
ul{
list-style:none;
}
li{
display: inline-box;
width: 50px;
padding: 20px;
float: left;
}
.active{
position: relative;
border-bottom: 3px solid red;
}
/*triangle absolute position and centred*/
.active:after{
content:"";
position: absolute;
width: 0;
height: 0;
left: 50%;
bottom: -10px;
margin-left: -10px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #ff0000 transparent transparent transparent;
}
https://codepen.io/flinius/pen/XgyLba
I am trying to create a floating header nav menu and a floating footer nav menu, both customized. However, I can't figure out where to put it in the code, so that it doesn't scroll away.
The website is here http://steppetsgame.com. The grey bar at the bottom is suppose to stay at the bottom as I scroll down. As you can see it is stuck to something and I can't figure out how to stop this from happening.
I am using a parallaxing theme by themify on wordpress.
<div class="footer_custom">
Footer Text/Code
</div>
.footer_custom {
background-color: #d7d7d7;
position: absolute;
z-index: 9999;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
margin: 0;
height: 100px;
}
I do not know if I understand what you want to do with the header menu, but to position it at the top of your site you can use this:
#nav-bar {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
z-index: 9998;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
margin: 0px;
}
The "fixed" value combined with the top property will position your nav at the top of your site and it works when scrolling.
For your footer menu is very similar:
.footer_custom {
background-color: #D7D7D7;
position: fixed;
z-index: 9999;
bottom: 0px;
left: 0px;
width: 100%;
padding: 0px;
margin: 0px;
height: 100px;
}
The "fixed" value combined with the bottom property will position your footer nav at the bottom of your site and it works when scrolling.
And both codes work with responsive design.
I would like to know how would I dynamically increase the width of the user menu(which is an image), which could take any length of the menu item name. I am using below code.
The menu items in the user menu are shown on a image. Below is the code. Please let me know where should I make the changes. I am trying to use but I am failing to add menu items with large names(they overflow from the menu bar).
user-menu ul li ul {
background: url("naviagtion-dropdwnbackgrd.png") no-repeat scroll left -30px transparent;
border: 0 none;
clear: left;
float: left;
left: -105px;
list-style-image: none;
padding: 15px 11px 0 0;
position: absolute;
top: 17px;
width: 145px;
z-index: 8; }
It has been a few days that I am learning CSS and html. I am trying to build a website and my content container works ( is displayed) exactly how I want it on my 17inch laptop. However when i move it to my desktop in moves to the left and comes down to the bottom.
How do i make an element change in accordance to the resolution of a screen.
/* Entire drop-up menu, show on mouse hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout
{
display: block;
position: absolute;
margin: auto;
bottom: 40px;
border: 1px solid #111111;
border-radius: 7px 7px 0px 0px;
background: rgba(0,0,0,0.5);
bottom: 90px;
left: 500px;
width: 500px;
padding-left: 50px;
padding-right: 54px;
font-size: 12px;
left: 400px;
}
There are many things to take account to build a responsive site, but the first is about not fixing width in pixels, but in % and/or use media queries.
I am trying to duplicate this style of a sidebar menu with the background image, but when I use the same stylesheet code and image, it doesnt span the entire height of the sidebar.
The example: http://demo.ponjoh.com/Simpla-Admin/index.html
The css used (on example site and mine):
#sidebar {
background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
color: #888888;
font-size: 11px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 230px;
}
On my site, the image only displays in its actual dimensions (230x197) and doesnt fill the sidebar. What am I missing?
The person who coded that CSS implemented the background image of the sidebar twice. Once in the body and once inside the sidebar.
body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
/* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}
Here's what you're missing though:
background: url("../images/bg-sidebar.gif") repeat-y top left;
If the background image is a repeatable image... change no-repeat to repeat or vertically repeat-y
You would have to add a bottom: 0; as well as position: relative; to the #body-wrapper and activating the background-repeat. But be warned! This is a very dirty CSS coding method and will probably lead to misunderstandings and failures - still it works.
#body-wrapper {
/* Your code stuff ... */
position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
width: 230px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
color: #888888;
font-size: 11px;
}