Basically everything is working fine except the scroll bar shows up on pages where it's not needed and when the page is resized the navbar won't extend down with it and will end up like this (Image Below), You can see the navigation bar won't extend down with the moved content of the page.
http://i.stack.imgur.com/QynSv.png
Here is a JSFiddle link, any help would be greatly appreciated!
JSFiddle: https://jsfiddle.net/pq3t70th/1/
Navigation CSS Code
nav {
border-right-style:solid;
border-right-color:black;
border-right-width: 5px;
background-color: #3b5999;
height: 100%;
width: 180px;
position: absolute;
}
You use display: table-cell; for section and nav
jsfiddle
Related
I am designing a webpage in which I have a sidebar and some other stuff like shown below
Here, Your Friends is the sidebar I am talking about. whenever I put my cursor over that sidebar and scroll, the page is scrolling instead of the sidebar.
What I am expecting to happen is that, when I put my cursor outside of that sidebar and scroll, the main page should scroll down. and when I keep it on the sidebar and scroll the sidebar should scroll down.
This is the CSS of my sidebar
header .c-header-container .c-side-bar-right {
position: fixed;
top: 80px;
bottom: 37px;
right: 0px;
background-color: var(--side-bar-color);
display: flex;
flex-direction: column;
padding: 1rem;
border: 4px solid black;
border-top: none;
width: 20%;
z-index: -1;
overflow-y: scroll;
}
Is there any way I can achieve this?
I really see no flaw in your codes but could you please try setting the z-index to a positive value or better still remove it?
Relative to which element did you set the z-index and what are the css properties of this element?.. We're still working
The sidebar isn't scrolling probably because of its z-index. Try setting it to high value, maybe 99 or more. This should fix the problem.
.sidebar-class {
z-index: 99;
}
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 have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
On my site, http://www.tokensofchange.org, the only way to position my navbar in the correct place is to use a margin-top style in the CSS.
.nav {
margin-top:10.3%;
width: 70%;
background-color: #050936;
height:92px;
float: right;
border-top: 5px solid rgba(0,108,255,0.35);
}
If I remove the margin-top: 10.3%, the navbar is pushed up under the green buttons shown on the site. I am not sure if the background image is formatted incorrectly to push the navbar down:
.backgrounddiv {
background: url('/images/Background_Index3.jpg');
padding-bottom: 2%;
background-size: 100% auto;
}
The two buttons displayed do not have any margin styles included, so I am unsure why the navbar does not sit below the header with the background image, logo, and buttons. Any ideas would be greatly appreciated. Thanks!
You have a negative margin of -9em on the .wrapper div. Remove that and you can then remove the margin-top:10.3%; from your navigation.
I hope that helps
I am using a template based off of Twitter Bootstrap for a site I'm building (here's the link: rwphoto), but I am having some trouble with the mobile drop-down menu. It overlaps instead of pushing content down if I change the navbar-inner div to 194px to fit the height of the repeating image I'm using. I am just not sure exactly why this is a problem. I've looked around, but can't seem to find a solution to this.
Additionally, how would I center the .brand element (logo) in mobile, instead of having it to the left? And how would I get the nav links centered vertically, and horizontally between the logo and the right edge of the screen?
sigh... Sorry, first time using Bootstrap, obviously... :/
For Centering logo, implement this css code to the referred class...
.container { position:relative; }
.brand { text-align: center; width: 97%;}
.navbar .btn-navbar {
display: block;
position: absolute;
right: 0;
}
For Centering, the nav links,
.nav-collapse .nav > li > a {
margin: 12px 0 !important;
text-align: center;
}
And for the drop-down overlay issue, add this,
.nav-collapse { padding-top: 1em; }