An illustration using Bootstrap 5: Cover page design featuring a fixed-top navigation bar and smoothly scrolling content

Struggling with customizing the bootstrap 5 cover page example. I really love the design, especially the header and footer (without toggle, brand staying on a single line, etc.).

Want a page with more content scrolling in the middle, while keeping the navbar and footer fixed. Changing the footer class to footer fixex-bottom got me close to my goal easily.

Encountering 2 problems:

  1. Need help fixing the navbar at the top (without the text expanding full width). Want to scroll with the navbar in the exact style, staying fixed at the top but not stretching the full page with its content. Also trying to change the color.

  2. When there is little text, it should be centered on the page between the header and footer, not aligned at the top.

Check out this CodePen example. My first time using CodePen, so please be patient :)

htmlcssbootstrap-5

Answer №1

While this isn't the exact HTML format I would typically use, I managed to make it function by building upon your existing code. You can view the modifications I made by checking out my fork of your pen: Fork example

To ensure functionality, I implemented the following changes:

  1. I included the class fixed-top to your yellow header. This adjustment allowed it to expand as desired and remain fixed at the top of the page. Moreover, I added a bootstrap container class to maintain a consistent width across your content and centered everything. I also updated your existing CSS styles to align with the max-width specified in your cover-container class.

  2. In order to vertically center the page contents, I grouped them within a container (with borders for visual reference). I aimed to ensure the page's height was at least 100vh to facilitate proper vertical alignment. I recommend consulting the Bootstrap documentation to understand the functionality of their classes. The classes I introduced included display: flex; and align-items: center;, with py-5 primarily serving as a stylistic choice.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the <container> block be positioned beneath the <header> block?

header { background: blue; color: white; width: 100%; } .container { background: green; text-align: center; width: 100%; height: 100px; transform: skew(0, -10deg); color: white; position: relative; top: 55px; } .container .home{ p ...

htmlcss

Can a list be transformed into a toolbar in a responsive design?

Here is my card with a nav section that includes multiple items (although I've only included one here for simplicity). <div class="col-md-3"> <div class="card"> <div class="card-header"> ...

cssbootstrap-4sass

Using Javascript to move the cursor within an editable table before saving the row

I have a Javascript code where I can navigate a table using the up, down, and enter keys. It works perfectly, but I want to enhance it by allowing the cursor to move left and right within the same row. Is there a way to achieve this? I attempted implement ...

javascriptajaxhtmlhtml-table

Apply this class exclusively for mobile devices

Is there a way to add the class p-5 only for mobile devices? For desktop computers: <nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding:0px 10px 0px 10px;"> For mobile devices: <nav class="navbar navbar-expand-lg navbar-l ...

htmlcss

Mobile view doesn't quite center using flexbox, even though it works fine on desktop

Utilizing flexbox, the two distinct sentences that form the content of the page are centered. However, upon viewing the website on my mobile phone, the second sentence appears aligned to the left side. Here's how the site appears on a phone I've ...

htmlcssflexboxmedia-queriestext-align

Error message indicating that the event "OnkeyDown" is not in sync within the React application

Hey everyone! I'm a beginner in web development and I'm struggling to understand why the event "OnKeyDown" is triggered the second time. My task involves changing (increasing, decreasing) parts of a date (day, month, year, hour, minutes, seconds) ...

javascripthtmlreactjskeydown

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

javascriptjqueryhtml

Using htaccess to redirect all html pages to php except for one

My website is configured to redirect all html pages to php using htaccess rules: RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} ^website.com RewriteRule (.*) http://www.website.com/$1 [R=301,L] RewriteRule ^(.+)\.html$ http://www.website.c ...

phphtml.htaccesshttp-redirect

Issues with Opera displaying specific characters when using webfonts

Perhaps it's not supposed to work this way, but hear me out. I'm utilizing Google Web Fonts and adding the PT Sans font like this: <link href="https://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" ty ...

htmlcssfont-facewebfonts

utilizing window.location.href to direct to a page with javascript capabilities

I am currently developing my own personal website. It is designed to be very light in terms of loading and content. This website relies heavily on the use of jquery, so if a user's browser does not have JavaScript enabled, the site will not function ...

javascriptjqueryhtml

As I hover over this bootstrap button with the class "btn-info", its background color fades away

Can anyone explain why this button loses its background color when I hover over it? Here is the code for the button: <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <button type="butt ...

jqueryhtmlcsstwitter-bootstrap

Attempting to retrieve currentScript is causing a typeError to be thrown

I'm attempting to access a custom attribute that I added to my script tag: <script type="text/javascript" src="https://.../mysource.js" customdata="some_value"></script> To make this work on Internet Explorer ...

javascripthtml

Troubleshooting CSS Code Issues on Myspace

Greetings! I am currently working on enhancing a friend's profile on myspace.com. I have two divs on each side of the screen that I want to align next to each other. I have tried using float: left; and float: right;, as well as experimenting with marg ...

cssmyspace

The HTML table fails to refresh after an Ajax request has been made

I am currently utilizing Ajax to delete a row from the Roles table. The functionality allows the user to add and delete roles using a link for each row. While the deletion process works properly and removes the row from the database, the table does not get ...

javascriptjqueryhtmlasp.net-mvc

Customizing Material-UI: A guide to overriding inner components

Looking to customize the styles of a Material UI Switch for the small variation? I have applied global styles but now want to override the styles of elements like track and thumb. Targeting the root element with the sizeSmall class is working, but unsure o ...

cssreactjsmaterial-uijss

Having trouble with my phonegap app not allowing me to open any

I've just embarked on creating my first phonegap application using an HTML5 mobile website template. After deploying it, I noticed that the external links are not working within the app. Clicking on a link doesn't seem to do anything. To addres ...

androidhtmlcordovaphonegap-plugins

Calculating the total of selected values in Checkboxes and Selectors using KnockoutJS

I have already created this using jQuery. You can view it on JSFiddle: JSFiddle HTML: <div class="container"> <header> <h3>The Crazy Things We'll Do for Money</h3> <div class="small"><em>An ele ...

javascriptjqueryhtmlcssknockout.js

Stylish mobile navigation styles with CSS

Hey there, I appreciate any help you can provide. I'm having trouble figuring out the right CSS code to modify the colors of my Mobile Menu only... I'd like to change the placeholder text as well as the text and background of the drop-down menu ...

cssmenu

AngularJs - Show the response only upon verifying the correct answer

Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...

javascripthtmlcssangularjs

What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

Currently, I am trying to implement a tooltip above my progress bar. However, the small tooltip that I have is not functioning correctly... This is how it currently appears: https://i.sstatic.net/ZJUyT.png I need the tooltip to display above the white d ...

javascripthtmlcsstwitter-bootstrapbootstrap-4