I am trying to replicate this UI structure.
Can anyone give some suggestions or point out some resources?
I specifically am having trouble connecting the search bar to the accompanying navbar.
Try giving some negative margin-top value to the search bar, it will shift a bit up and would overlap with the navbar, looking like the one you showed.
Related
Im trying to add my logo to my bootstrap 3 navigation. My goal is to achieve this:
MY NAV WITH LOGO
It shouldn't be centered and SHOULD be bigger than navigation panel (like in picture). I know that there are many soutions for those problems, but I've tried many of them and effect was poor.
Can anybody help me with this?
If it's necessary I can post any CSS or HTML code.
Thanks.
Edit: I did it, by using proper media queries nad manually positioned logo with margin.
Help get the Search Bar and Menu in the foreground. I tried the Z-index and that has not worked. I have a negative margin on the search bar to put it in the top part of the website. It's hidden behind the solar system image.
http://wearethenewmedia.com/indextrial.html
Also, see original at WeAreTheNewMedia.com
It's too much code to post in here.
Thanks!!
We're also trying to implement this Sidebar with our Menu button.
Link: http://wearethenewmedia.com/menu/index.html
Without seeing your code it's hard to evaluate or make any suggestions. You should be able to use position: fixed; on whatever container the nav is in to attach it to the top. This will put it on the top of the solar system image. If you don't want it to appear until after, just use jquery to make it fade in once you pass the solar system image.
I need to create a status bar, at the bottom of the screen (fixed position) for my webapp. Because I haven't lots of CSS knowledge, I'm using Twitter Bootstrap.
How can I create this? I've been looking around the web, but I haven't found any example... Or is it possible to create a second nav-bar (it looks great!), and attach it to the bottom of the screen? Maybe creating some kind of "navbar-fixed-bottom" CSS rule?
A fixed-bottom Navbar seems right. There's even a Bootstrap Example that demonstrates this.
I have added the bootstrap collapse bar to my menu, it is working as it should, however since I have a unique nav bar that is in a fixed footer, it's not expanding and showing the nested content when the button is hit.
My educated guess is because it drops DOWN and there is no space under my footer as it's the lowest element on the page. Is there a way to make the direction go upward?
Here is a link to the site, so hopefully the source code will be enough. If not please let me know what you would like me to post on here.
It's also important to point out that I've tested this in the header and it does not function there either...
Is there a way to make the jquery mobile List divider header be fixed at the top of the page until the next letter or list divider comes up and takes its place, like in the iPhone UITableView?
(http://jquerymobile.com/test/docs/lists/lists-divider.html, the list dividers dont stay at the top but rather scroll up and down with the page.)
I've already search on SO (http://stackoverflow.com/questions/7814088/how-to-make-jquery-mobile-list-dividers-fixed-at-top) but the link seems to be down..
Thanks for your help in advance.
There's a great plugin which does exactly this, and gives you custom events etc. The project is available on GitHub and there's also a showcase article about it.
You'd have to port this: stickySectionHeaders
Is this the same thing: https://github.com/jquery/jquery-mobile/blob/master/experiments/scrollview/lists-divider.html ?