I am trying to create a simple, floating and responsive navigation bar while using Skeleton boilerplate.
It should be nothing more than a logo align to the left of container and a few menu anchor links aligned to the right. Position of it should be fixed while scrolling the site's content, while staying in Skeleton's responsive grid. Exactly like here.
Natural way of doing this would be something like this for me.
<header>
<div class="container">
<div class="row" style="position: absolute; margin-top: 5rem">
<div class="two columns">
<!--LOGO-->
</div>
<div class="ten columns" style="text-align: right;">
<!--MENU-->
</div>
</div>
</div>
</header>
The problem is that by setting position: absolute, div loses its ability to divide into columns. Also, the links aren't clickable. Can anyone suggest a working solution? Having a hamburger menu icon on mobile would be an ideal extension, so if anyone knows the simplest way to do this, I would love to hear it out.
Thanks in advance!
Related
i want to make a centered resized image+ navigation bar in a webpage with header and footer, header fixed top, footer fixed buttom, and image and the navbar, together should be resizable, respecting the aspect ration of the image (image could shrink, but never bypass original size.
the image is done, behaving as wanted!
the problem i had, i couldn't make the navigation bar stick in the bottom of the image as it's resized!
here is my code: https://codepen.io/chlegou/pen/vvYzya
<div class="popup">
<img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg" />
<span class="content">
<span class="navbar">Navigation Bar</span>
</span>
</div>
i want the popup content stick together, with the image dynamic width. image still could shrink as it is! fix only the navbar to follow the image and stick to it.
thanks!
UPDATED the styling as you needed please check the codepen:https://codepen.io/anon/pen/ZVOoqq
<div class="outer-container">
<div class="inner-container">
<img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg"/>
<div class="centered-content">
<span style="overflow: hidden">Navigation Bar</span>
</div>
</div>
</div>
and the for the styling of the divs please refer the codepen given above
I've got a problem with my header menu. The menu div is inside a container (width 1240px) and the div is 100%. I would like to have a full green colored menu (like above from Stack Exchange).
Can I change it with CSS? Could anybody help me please?
You'll need to take the menu div out of the container and place it above.
If you are using bootstrap, you could use container-fluid, if not follow the answer of Jordan and move the menu out of the container
Assuming this is your situation
<div class="container" width="1240px">
<div class="menu" width="100%">..</div>
</div>
You can either do the following
<div class="menu" width="100%">..</div>
<div class="container" width="1240px">
</div>
or
<div class="container-fluid">
<div class="menu" width="100%">..</div>
</div>
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
Im coding a navigation like the below mockup using bootstrap 2.x, the idea is to have a centered logo along with a 'hamburger stack navigation toggle'
Ive got the logo centered fine, but im a little unsure how to get it to work with the stack icon whilst keeping to logo centered, because if i add in another element (the hamburger stack) which will need its own span then the logo can only have span11 which isn't enough to center it on the page.
I guess i could achieve this with absolute positioning of the hamburger stack, but would this be correct in terms of using the bootstrap framework and keeping the responsive nature of it working correctly.
Ive made a jsfiddle of the issue here - http://jsfiddle.net/xKSUH/937/
The html im using is
<div class="row-fluid">
<div class="span12 logo-centre">
LOGO
</div>
<div class="span8">
= <!--hamburger stack placeholder icon-->
</div>
You can use an offset to create an empty column on the left side to keep the logo centered.
<div class="row-fluid">
<div class="span10 offset1 logo-centre">
LOGO
</div>
<div class="span1">
= <!--hamburger stack placeholder icon-->
</div>
</div>
Updated fiddle - http://jsfiddle.net/xKSUH/939/
A bug has creeped in and I can't figure out where it came from. Any help would be appreciated.
If you look at [removed] in Chrome, you'll see that the logo on the left of the nav menu is nicely positioned in the vertical center of the menu. But if you open it up in Safari, it is displaying differently. It's aligning to the top of the menu.
Adding a negative margin top to compensate in Safari messes it up in Chrome.
Any ideas how to fix this?
To give you some idea on how to quickly clean this up, you could do something like this and build upon it:
<header>
<div class="container">
<div class="three columns">
<img id="header-logo" src="/assets/logo-300px.png" style="width:114px;height:100px;">
</div>
<div class="nine columns">
Navigation
</div>
</div>
</header>
Some CSS to do the margin on the top:
header {
margin-top: 30px;
}