React - fixed navbar and nav-tab

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>
        )
    }
}