navbar-fixed-top inside parent div with full width - html

I have a webpage which has a sidebar-nav along the left and a navbar-fixed-top along the top. The sidebar is collapsible by clicking a button which is on the top navbar. The top nav bar starts where the sidebar ends.
That part all works correctly. What is not working is that I can't get the top navbar to take up the full width available to it (excluding the sidebar). In other words when the sidebar is expanded, the top navbar needs to take up all of the remaining width. When the side bar is collapsed, it needs to take up the whole width. This is what I have:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<!--side bar menu items here-->
</ul>
</div>
<div class="navbar-fixed-top" style="position:relative;">
<div class="navbar" style="position:fixed;">
<!--top navbar items here-->
<!--button to collapse/hide sidebar also here-->
</div>
</div>
<div class="container-fluid" id="page-content-wrapper">
<div class="col-lg-12">
<!--general page content here-->
</div>
</div>
</div>
I have tried adding width:80% to the navbar which works correctly when the sidebar is expanded, but then when you collapse the side bar it still only takes up 80% of the full width. It should expand to 100% when that happens.

Related

Fixed / sticky header and sidebar with Bulma

I have the following HTML with Bulma:
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top"><!-- My nav bar --></nav>
<div class="columns">
<div class="column"><!-- Header I'd like to be fixed --></div>
</div>
<div class="columns">
<div class="column"><!-- Sidebar I'd like to be fixed --></div>
<div class="column"><!-- Main content that should be scrollable --></div>
</div>
</body>
I already use a fixed navbar, it's working fine. But I'd like to have another fixed header just below it. Then below that header, to have the left side fixed as well (side menu), and finally to have the main content scrollable.
Any idea how I could achieve this?

flex box inside a flex box with scroll overflow?

I've looked at the similar questions that came up from this title, but they're not quite the same issue I'm having.
https://jsfiddle.net/kx4q1ut8/1/
<div style="display:flex;flex-direction:column;height:100vh;background:gray;">
<div style="background:red; width:100vw;min-height:80px;">Header</div> <!-- Header -->
<div style="background:green;width:100vw;flex-grow:1;display:flex;flex-direction:row"> <!-- outer body container -->
<div style="background:blue; width:140px;height:100%;"></div> <!-- side bar -->
<div style="background:yellow;height:100%;flex-grow:1;display:flex;flex-direction:column"> <!-- inner body container -->
<div style="background:gray;width:100%;height:200px;"> <!-- filter panel -->
</div>
<div style="background:cyan;width:100%;flex-grow:1;overflow:scroll"> <!-- table panel -->
want this content scrollable if beyond bottom of page
</div>
</div>
</div>
</div>
All the areas are fixed sizes except for the cyan area. I need that area expandable to match the rest of the window height. What I also need is for that area to have scrollable content but can't seem to work that part out completely. If you fill the area with enough text it'll get a scrollbar but I think that container is expanding beyond the bottom of the page because I can't fully scroll to see the end of the off-screen content. The layout is for a web application.

Bootstrap - Fixed Sidebar in body

Im building a react website and am using Bootstrap 4. On one of my page in the content body I have a two column layout. The left side is a sidebar and on the right is a long column of content. When scrolling I want to keep the left sidebar on top.
Here is a picture for illustration:
My current code works, however when scrolling down the sidebar gets fixed/positioned at the center instead of the top. It looks like it's being aligned as if the header is still above it. Here is my current code:
<div className="header-wrap">
//Header Here
</div>
<div className="container">
<div className="row">
<div className="col-3 position-fixed" id="sticky-sidebar">
//Sidebar here
</div>
<div className="col offset-3" id="main">
//body here
</div>
</div>
</div>
<div className="footer-wrap">
//Footer Here
</div>
My goal is as you scroll, the header leaves the screen (which it already does) the sidebar gets positioned to the top.
for example
try the code
#sticky-sidebar{ position: sticky; top: 0;}
I'm leaving a few resources
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
https://www.w3schools.com/howto/howto_css_image_sticky.asp

Bootstrap: navbar row with display:table not working with width:100% & vertical-align:middle

See this Fiddle: https://jsfiddle.net/5aw2w9w6/
The code is like this:
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:#FF0000">
<div class="container">
<div class="row" style="width:100%;display:table; table-layout:fixed; vertical-align:middle">
<div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle">
<!-- content -->
</div>
<div class="col-xs-2 col-sm-8" style="display:table-cell; vertical-align:middle">
<!-- content -->
</div>
<div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle;text-align:right">
<!-- content -->
</div>
</div>
</div>
</nav>
2 things are broken:
1) The width:100% on the row is not working. If you do an inspect element in the fiddle, you'll see that the navbar and container stretch the full width of the screen, but the row does not. This is also made evident in that the last col-xs-* has a text-align:right. As you can see in the fiddle, there's still a gap between the cart button and the right edge of the screen
2) The vertical-align:middle is not working. If it were, I'd expect the cart button to not touch the top edge of the screen, and instead be aligned middle (vertically) relative to the logo image (white, it's the content in the first section)
The check your container it has a max-width of width: 750px; that's why it doesn't touch the edges of the screen
For the vertical align middle please set height to your table row and the other reason why ain't work is because the
float:left of every column try to remove it and see it will work fine.
https://jsfiddle.net/nzjqua4s/1/

Using an empty <div> to fill up menu bar space

In this website, top side of the picture is consumed by the black menu bar. I would like to place an empty <div> to push the picture downwards. <div> height needs to be resized automatically to prevent blank space from appearing in different resolutions.
I tried adding empty <div>s, using vmin/vmax, didn't work.
JSFiddle link
menu bar
<header id="header">
<div class="top-bar">
<div class="container">
<div class="row">
</div>
</div><!--/.container-->
</div><!--/.top-bar-->
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse navbar-right">
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
The image is used as 'background-image' on a div with a fixed size. Some advantages are loading time and that the image can not be selected or dragged. A disadvantages the inflexibility. It's not that the black bar overlaps the image, as you can see when inspecting the element, but it's the div itself that cuts off part of the image. The best thing you can do is only use header images that exactly fit the container or you can play with the CSS background-size. Have a look at cover, but know that cover does not work in older browsers.