CODEWITHSUNDEEP
htmlcssreactjs
JamesMatson
JamesMatson

Reputation: 2922

React NavBar inconsistent position when navigating to different routes

Disclaimer - I am a beginner to CSS, React, and JavaScript in general.

I am working on a small proof of concept website in order to learn React. I have a bottom aligned NavBar which has 4 nav items (account, rewards, cards, about). The NavBar is designed to show up consistently no matter which link you visit. Two links currently have routes thanks to react-router. Account and About. Originally, Account and About just had a placeholder component returning some text. This worked fine.

Since starting to work on a basic profile card for the 'Account' page, I've noticed the NavBar no longer sits at the same height when navigating to 'Account' as opposed to any of the other links. I assume I've impacted it with my Profile card, but because I'm not particularly great with CSS/React I can't quite figure out why/how.

Upvotes: 0

Views: 90

Answers (1)

Matt
Matt

Reputation: 921

Its because of your row class on the /customer page. You have gutter width pushing the elements wider than the page, which is also why you get a horizontal scroll bar at the bottom.

Remember the row has to go inside the container not the container inside the row.

On your class 'Row' inside /customer change the className to this

<div className="row g-0">....

This sets the gutter to 0 as you have no container. So I would also add a container when using rows.

You would be better off building a page container in my eyes so each page uses the same classes ect.

PageContainer.js

export default function PageContainer(props) {
    return(
    <div className="container-fluid bg-light">
        <div className="row g-0">
            <div className="col">
                {props.children}
            </div>
            <div className="col">
                <Navigation />
            </div>
        </div
    </div
}

Then in your customer.js

...
return(
    <PageContainer>
         <ProfileCard loyalty_id={props.loyaltyid}/>
    </PageContainer>

EDIT

Sorry completely forgot about the navbar haha

Move the navbar now inside the PageContainer as well.

Let me know if you need anymore help

Upvotes: 1

Related Questions