React - fixed navbar and nav-tab - reactjs

Question

I am using reactstrap package in for my project. So, I have created a HeaderComponent which is a Navbar which is fixed at top fixed=top.
import React from 'react';
import Context from '../provider'
import {
Collapse,
Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
Form, FormGroup, Label, Input, Button,
} from 'reactstrap';
import LoginComponent from './LoginComponent'
import SignupComponent from './SignupComponent'
class HeaderComponent extends React.Component {
render() {
return (
<Context.Consumer>
{context => {
return (
<Navbar color="light" light expand="md" fixed="top">
<NavbarBrand href="/">Reddit</NavbarBrand>
<NavbarToggler onClick={() => context.toggleNavbar()} />
<Collapse isOpen={context.navbarOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem><LoginComponent /></NavItem>
<NavItem><SignupComponent /></NavItem>
</Nav>
</Collapse>
</Navbar>
)
}}
</Context.Consumer>
)
}
}
export default HeaderComponent;
I also have a TabComponent:
import React, {Component} from 'react'
import Context from '../../provider'
import {Nav, NavItem, NavLink} from 'reactstrap'
import classnames from 'classnames'
class TabComponent extends Component {
render() {
return (
<Context.Consumer>
{context => (
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: context.activeTab === '1' })}
onClick={() => { context.toggleTab('1'); }}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: context.activeTab === '2' })}
onClick={() => { context.toggleTab('2'); }}
>
Popular
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: context.activeTab === '3' })}
onClick={() => { context.toggleTab('3'); }}
>
All
</NavLink>
</NavItem>
</Nav>
)}
</Context.Consumer>
)
}
}
export default TabComponent;
I am making the HeaderComponent fixed but I don't know how to make the TabComponent fixed below the HeaderComponent.
Based on this answer, I did the following:
TopComponent
import React, {Component} from 'react'
import HeaderComponent from './HeaderComponent'
import TabComponent from './TabComponent'
import {Row, Col, Container} from 'reactstrap'
import './style.css'
export default class TopComponent extends Component {
render() {
return (
<div className='vert-align'>
<Container>
<Row><Col><HeaderComponent /></Col></Row>
<Row><Col><TabComponent /></Col></Row>
</Container>
</div>
)
}
}
style.css
.vert-align {
top:0;
position: fixed;
z-index:100;
}
They are now fixed to the top one below the other but, they are not covering the complete width of screen now!

Answer 1

The easiest in my opinion would be to make a parent component FixedTopComponent for both HeaderComponent and TabComponent, and fix this one to the top fixed=top. then you just have to align the two children components vertically, using either bootstrap rows or {display: flex; flex-direction: column} in your css.
Here's an example:
class FixedTopComponent extends React.Component {
render() {
const vert_align = {
display: 'flex',
flexDirection: 'column'
}
<div id='fixed-top" style={vert_align} fixed='top'>
<HeaderComponent />
<TabComponent />
</div>
}
}
Edit: For your second issue (not sure cause I never used reactstrap), try:
import React, {Component} from 'react'
import HeaderComponent from './HeaderComponent'
import TabComponent from './TabComponent'
import {Row, Col, Container} from 'reactstrap'
import './style.css'
export default class TopComponent extends Component {
render() {
return (
<Container fluid className='vert-align'>
<Row><Col><HeaderComponent /></Col></Row>
<Row><Col><TabComponent /></Col></Row>
</Container>
)
}
}