- #1
Darkmisc
- 217
- 30
- TL;DR Summary
- I want to make a sticky navbar with a banner above it. The sticky navbar spans 100% of the screen for all screen widths, but the banner will shrink at seemingly random points so that it doesn't always fill 100% of the width.
Hi everyone
I have a Bootstrap navbar and I'd like to add a banner above it. The Bootstrap navbar fills 100% of the screen width for all screen widths.
I've added a styled component to make a Parent div and a Banner div. These occupy 100% of the screen width most of the time, but at 887px and 464px they shrink (see below).
I've had a similar issue before with a container and was able to fix it by using media queries to set the width back to 100%. I tried this again, but it didn't work.
Lines 12-43 are the only lines that I've added to the Bootstrap code. I also tried using Bootstrap to make the Parent and Banner, but got the same result.
Here is the code for the page.
I think the media queries work (just not in the way that I'd like). I tested to see what would happen if I used the media query to set the width to 150%. This makes the pink part appear, which didn't happen before.
Does anyone know what's happening? I don't understand why I'm getting issues at (seemingly) random widths. Using media queries fixed a similar problem, and I don't understand why it's not working here also.
Thanks
I have a Bootstrap navbar and I'd like to add a banner above it. The Bootstrap navbar fills 100% of the screen width for all screen widths.
I've added a styled component to make a Parent div and a Banner div. These occupy 100% of the screen width most of the time, but at 887px and 464px they shrink (see below).
I've had a similar issue before with a container and was able to fix it by using media queries to set the width back to 100%. I tried this again, but it didn't work.
Lines 12-43 are the only lines that I've added to the Bootstrap code. I also tried using Bootstrap to make the Parent and Banner, but got the same result.
Here is the code for the page.
StickNavbar.js:
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import Example from './Modal';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhone } from '@fortawesome/free-solid-svg-icons';
import { useGlobals } from '../../Globals';
import "./BNavbar.css";
import logo from "../../images/MJNNavbarlogo.png";
import styled from 'styled-components';
const Parent = styled.div`
display:grid;
background:blue;
width:100vw;
@media screen and (max-width: 887px) {
display: grid;
width:100%;}
@media screen and (max-width: 464px) {
display: grid;
width:100%;}
`;
const Banner = styled.div`
display:grid;
height: 80px;
width: 100%;
width:100vw;
background: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
@media screen and (max-width: 887px) {
display: grid;
width:100%;}
@media screen and (max-width: 464px) {
display: grid;
width:100%;}
`;
const StickyNavbar = () => {
const { PrimaryColour, GlobalFont } = useGlobals();
useEffect(() => {
// Set the CSS variable for primary color
document.documentElement.style.setProperty('--primary-color', PrimaryColour);
// Set the CSS variable for global font
document.documentElement.style.setProperty('--global-font', GlobalFont);
}, [PrimaryColour, GlobalFont]);
const navbarStyle = {
backgroundColor: PrimaryColour,
height: "80px",
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
position: 'fixed',
top: "80px",
left: 0,
width: '100%',
zIndex: 1000,
alignItems: "center",
};
return (
<Parent>
<Banner/>
<nav className="navbar navbar-expand-lg" style={navbarStyle}>
<Link className="navbar-brand" to="/">
<img src={logo} alt="Logo" />
</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse custom-navbar-collapse" id="navbarNav">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link className="nav-link" to="/">Home</Link>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul className="dropdown-menu" aria-labelledby="navbarDropdown">
<li><Link className="dropdown-item" to="/services"
style={{ fontFamily: 'Roboto, sans-serif' }}
>Services</Link></li>
<li><Link className="dropdown-item" to="/services/development"
style={{ fontFamily: 'Roboto, sans-serif' }}>Development</Link></li>
<li><hr className="dropdown-divider" /></li>
<li><Link className="dropdown-item" to="/services/support"
style={{ fontFamily: 'Roboto, sans-serif' }}
>Support</Link></li>
</ul>
</li>
<li className="nav-item d-flex align-items-center custom-phone-number" style={{ marginLeft: "25px" }}>
<FontAwesomeIcon icon={faPhone} className="me-2" />
<a href="tel:0412123456" className="nav-link phone-number">
0412 123 456
</a>
</li>
<li className="nav-item active" style={{ marginLeft: "25px" }}>
<Example buttonText="Contact Us" />
</li>
</ul>
</div>
</nav>
</Parent>
);
};
export default StickyNavbar;
I think the media queries work (just not in the way that I'd like). I tested to see what would happen if I used the media query to set the width to 150%. This makes the pink part appear, which didn't happen before.
Does anyone know what's happening? I don't understand why I'm getting issues at (seemingly) random widths. Using media queries fixed a similar problem, and I don't understand why it's not working here also.
Thanks