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!

Solution

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

Comments

[Sreekar Mouli]

Thanks for that. How can I solve the update that I made in question?

[Zuma]

You're welcome. Look at my edited answer for your new issue. Also if this answer resolves your problem, could you accept it (green tick mark) ?

[Sreekar Mouli]

Received true for a non-boolean attribute fluid.

[Zuma]

That's weird, according to this: reactstrap.github.io/components/layout it's supposed to be a Boolean attribute. I don't really know reactstrap though, so unless you really need to make it work with bootstrap, you can just use flex like my first snippet

[Sreekar Mouli]

Ya it needs to be <Container fluid className='vert-align'>. Adding fluid makes the boolean true. Maybe add that to your answer! Thanks!