I am trying to implement Bootstrap's affixed navbar, like in
this example.
Here is a pen of what I have. It seems that the 'affix' class is always activated on the navbar element. That is, when I do
.affix {
top: 0;
}
The navbar automatically goes to the top on page load, when what I want it to do is be under the name and title. Any ideas on why this could be happening?
EDIT: Fixed the example link
Something like this?
https://codepen.io/anon/pen/mRrBNK
I've just moved the title and sub text and added a class within
<nav class="navbar navbar-default navbar-custom" data-spy="affix" data-offset top="197">
<div class="navbrand">
<h1> John Smith</h1></div>
<h4> Developer and Engineer </h4>
Related
I've built my project in bootstrap which has a top navigation bar and a sidebar.
Now I need to make sidebar, collapsible like this:
http://www.makerstudios.com/
But sidebar in my project is on left side of the page. How can I make this sidebar collapsible with minimum possible changes?
HTML:
<div class="col-md-3">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav">
<ul class="nav" id="side-menu">
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
You could use a simple jquery.
First you need to set up the sidebar to be off-screen though. This can be done by adding a
.sidebar {
left: -300px // For example
}
Then you need to make a jquery code, that listens on clicks on the button you want to be bring out the menu.
When the button is pressed, the jquery code should make the sidebar displayed again, and bring it to a visble range (left:0;)
<script>
$(function(){
$("#menu").click(function open(){
$('.sidebar').animate({ left: '0'}, 500);
});//opening it
$("#close").click(function close(){
$('.sidebar').animate({ left: '-200px'}, 500);
});// 'Closing it'. Takin it back off -screen within the timewindow of 500ms
});
</script>
So what you would have to do now, is setup the bar off-screen, and then create a buttons for your opening/closing.
This solution will make the sidebar go on top of the existing body, but if you would like it do be the same way as it is on the site you've linked, you just have to add a command to the jquery to move the content-partion(visible part) the same amount as the sidebar moves.
I have my own website
However, on resizing it, I see the options on the navbar going up and down, depending on window size, what is the problem? How do I fix it?
Simple fix is to change the .container to a .container-fluid:
<div class="container-fluid">
<div class="navbar-header navbar-right">
...
</div>
</div>
This will resize the container and not make it have fixed width.
I am trying to create a simple web ui with semantic ui.
I want a sidebar with a menu in it in some items will have subitems... Shouldn't be that hard hu?
http://jsfiddle.net/ycm8ctfx/
<div class="ui vertical menu sidebar teal">
<div class="menu">
<a class="item" target="_blank" href="http://semantic-ui.com/modules/dropdown.html">
Example
</a>
<div class="ui left pointing dropdown link item">
<i class="dropdown icon"></i>
Messages
<div class="menu">
How do I get the sub-items to "fly-out" of the sidebar over the normal page content? If you click "Messages" within the example, the menu will appear (watch the scrollbar at the bottom to appear) but since those are children of the sidebar, they are being shown within the sidebar. But I want them to float over the normal content! I didn't get it to work via fiddle with the z-index.
if sidebar is configured to use overlay transition it can be fixed by specifying
.ui.sidebar {
overflow: visible !important;
}
taken from here http://jsfiddle.net/59174tt1/2/
It's the combination of position:fixed and overflow on .ui.sidebar. This article might help: http://css-tricks.com/popping-hidden-overflow.
An alternative might be to use an accordion to keep everything within the sidebar.
Semantic-UI forewarns on its sidebar page that "Fixed position content may have issues changing its position when a sidebar appears." It then provides two possible solutions to the problem.
Surprisingly, on that very same page and throughout the site, Semantic-UI's website uses a fixed top menu that adjusts just fine when the left sidebar is triggered.
I want to simply create a fixed top menu like the one Semantic-UI's site uses that adjusts properly when the sidebar is opened. However, this is proving frustratingly difficult, as neither of the two proposed solutions work. I've inspected the markup, css, and javascript but can't figure out how he went from the code Semantic-UI provides to a working fixed top menu that adjusts properly when the sidebar is opened.
Any thoughts or direction? Using Semantic-UI how do you create a fixed top menu that adjusts properly when a sidebar is opened?
From the docs:
Using Fixed Content Any fixed position content that should move with
page content when your sidebar is visible, should receive the class
name fixed and exist as a sibling element to your sidebar.
Fixed content that is not included adjacent to your pusher will lose
its positioning when a sidebar is shown.
<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>
<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
<a class="item">Home </a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
<a class="item menu-trigger">Menu</a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<div class="pusher">
<!-- Page Content Here-->
<div class="ui basic segment">
<h3 class="ui header">Hello there</h3>
</div>
</div>
Don't forget to put the code above inside the "body" tag and including the css & js files.
Use the 'exclusive' setting to display multiple sidebars that play nicely with each other.
$('.your-shared-sidebar-class').sidebar('setting','exclusive',false).sidebar('show');
NEWER
So the scrolling is working now... But it's fixed to the top of the page. I need it to be in the correct position (next to the content) and then start scrolling with at it's current position with the content.
I'm trying to get my sidebar to scroll like this one here -> http://getbootstrap.com/2.3.2/components.html
The website is http://www.katyasarmiento.zzl.org (a free hosted site for now)
OLDER
I'm having a really hard time with this. I've looked up everything I could and I still can't figure it out. I got it to work for a while with a tutorial I found, but it didn't work well with ScrollSpy. So I'm trying to use Bootstrap's Affix.
I'm new to javascript / jquery so if anyone could look over my website and check to see what I'm doing wrong.
The ScrollSpy is working right now I think, I just can't get the sidebar to scroll with the page.
ALRIGHT I got it to work!
What I did was change the following...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix-top">
To...
<div class="bs-docs-sidebar span3">
<ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix" data-offset-top="255" data-offset-bottom="200">
So I put the data-spy and data-offset on the "bs-docs-sidenav" class, changed the script to that class also instead of the "bs-docs-sidebar" class.
Then I edited the css of "affix-top", "affix", and "affix-bottom" and it works very well :)
My original problem was referring to the sidebar class instead of the sidenav class, because that's what my affix CSS was working on.
Hope this helps anyone that was having a similar issue to mine :)
What helped me with this were these tutorials.
In ul element on your page you have written-
<ul class="nav nav-list bs-docs-sidenav">
Where you have used nav nav-list bs-docs-sidenav classes add one more class affix-top. Then it will be -
<ul class="nav nav-list bs-docs-sidenav affix-top">
And remove the class affix-top from this line, which is the parent node of your ul element-
<div class="bs-docs-sidebar span3 affix-top" data-offset-top="50" data-spy="affix">
And write this line like-
<div class="bs-docs-sidebar span3">