Is there a way to stop the navbar from covering the title?

Looking for help with customizing my navbar. At the moment, it resembles image one but I'm aiming for the appearance of image two. Any suggestions on how to achieve this? Is it a CSS modification that needs to be made?

/* Nav Bar*/
.navbar-brand{
    height: 3.5rem;
}

.navbar-nav li {
    padding-right: 0.1rem;
}

.nav-link {
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-item:hover {
    border-bottom: 1px solid #FF7200;
}

.nav
{
    
}
<body>
  <!--Navigation-->
  <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <img class="navbar-brand" src="../img/IMG_0537.PNG" alt="KAJ Construction Logo"/>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#section-Services" >Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Gallery" >Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Contact" >Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Current appearance when services link is clicked Desired look

javascripthtmlcssbootstrap-4

Answer №1

Enhance your design with built-in bootstrap classes such as mt-3 (where mt signifies margin-top) and p-2 (applies padding on all sides). The numbers 2 and 3 represent 2rem and 3rem respectively. Incorporating these classes will improve the layout of your page.

Answer №2

If your header has a position: fixed, make sure to add a margin-top to your page content that is equal to the header's height:

/* Nav Bar*/
.navbar-brand{
    height: 3.5rem;
}

.navbar-nav li {
    padding-right: 0.1rem;
}

.nav-link {
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-item:hover {
    border-bottom: 1px solid #FF7200;
}

main{
    margin-top: 72px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <!--Navigation-->
  <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <img class="navbar-brand" src="http://placekitten.com/200/200" alt="KAJ Construction Logo"/>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#section-Services" >Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Gallery" >Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Contact" >Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <main>
  <h1>Our Services</h1>
  </main>

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

Implementing a PHP script to prompt the user to input two random integers and sum them up on a webpage through $_POST method

My current project involves creating an interactive adding game using PHP and HTML. In this game, the user is required to guess the correct sum of two randomly generated integers. However, I am encountering an issue where each time the user submits their a ...

phphtml

Implementing promise-based looping for multiple GET requests in node.js

As a newcomer to promises, I've been searching for the right answer or pattern without much luck. Currently using node.js v4.2.4 and exploring The task seems simple enough... I need to execute multiple asynchronous blocks in a specific order, with on ...

javascriptnode.jsasynchronousftppromise

Guide on implementing jQuery Validation plugin with server-side validation at the form level

Does anyone have a suggestion for how to handle server-side validation errors that occur after passing the initial client-side validation on a form? $("#contact_form").validate({ submitHandler: function(form) { $.ajax({ type: 'POST', ...

javascriptjqueryvalidationjquery-validate

The loading time for the Docker index HTML file page is unacceptably slow

Sample Dockerfile: FROM ubuntu:22.04 RUN apt-get update RUN apt-get install -y nginx COPY -r dist/ /var/www/html/ CMD service nginx start && tail -F /var/log/nginx/error.log After that, run the following commands: docker build -t website . docker ...

htmlangulardockernginxstatic-files

What is the best way to import a background image from a different webpage?

I'm working on a project where I need to dynamically load content from other pages using jQuery. Here is the code snippet: $('#newPage').load('example.html' + ' #pageContent', function() { loadComplete(); }) ...

jqueryhtmlajax

Utilizing jQuery to iterate over dynamically generated elements sharing a common class

Whenever I click a button, numerous div elements are dynamically created. <table> <tbody id="ProductDetail"></tbody> </table> These dynamically created divs have an associated Amount value that is added upon creation. funtion ...

javascriptjqueryhtml

Filtering an array of parent elements in Javascript based on a specific value found in

Trying to filter data from a 3-layer array based on child array values. Making progress but hitting a roadblock at the end. { "id": 1, "grandparent": "Timmy", "parents": [ { "id&q ...

javascriptarrays

Encountering an error while attempting to launch an AngularJS application on Node.js? Let's

Currently, I am in the process of learning Angular. Whenever I attempt to run my code, an error message pops up: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7a737a7c6b6d70715f2b312f3115">[email protected]< ...

javascriptnode.jsangularjs

Count characters in multiple text inputs with AngularJS

Currently, I am developing an Angular JS application with the help of Angular-UI (bootstrap). In this app, there are multiple input boxes where users can enter data, which is then displayed in a div. My goal is to have a character count that applies to al ...

htmlangularjstwitter-bootstrap

Tips for concealing the browser's scroll bar on a designated webpage

Is there a way to hide the browser scrollbar on just one page of a website without affecting other pages? I have only been able to hide the scrollbar using body::-webkit-scrollbar { display: none; } However, this code hides the scrollbar for the enti ...

htmlcssvue.js

The page you are looking for cannot be located using Jquery AJAX JSON PHP POST -

Whenever I attempt to POST some JSON data to a local host, I consistently encounter a 404 Not Found error. Strangely enough, the php file is positioned precisely where it should be according to the script instructions. If anyone has dealt with this issue b ...

javascriptphpjqueryajaxjson

Is it possible for me to search within a retrieved document using Mongoose?

My schema is structured as follows... var TerritorySchema = new Schema({ user: Schema.Types.ObjectId, streets: [streets_schema] )}; var StreetsSchema = new Schema({ name: String, odd: [block_schema], even: [block_schema], tags: [S ...

javascriptnode.jsmongodbmongoosemongoose-schema

Struggling with incorporating a lightbox within an accordion feature in an .html file

I'm currently attempting to integrate this lightbox into this accordion feature. Individually, I've managed to get both elements up and running smoothly. However, when trying to combine them on the same page (regardless of nesting one inside the ...

javascriptjqueryhtmlaccordionlightbox

Ways to retrieve a value from a span using the Document Object Model

sample.html <span id='char'>{{value}}</span> sample.ts console.log((<HTMLInputElement>document.getElementById('char'))) This code snippet will display <span id='char'>ThisIsTheValueupdated</sp ...

javascripttypescript

Using a Hook inside a React function is not possible

I encountered an error message known as the "invalid hook call error" while using the useEffect hook in my code. According to the documentation, this issue usually arises due to either a version mismatch or incorrect function calls. Could someone kindly r ...

javascriptreactjsreact-hooks

Flexbox allows for the overflow of images within a container

Need help keeping my images from overflowing the <div class="display"> container and maintaining a square/box shape It should work with flexbox. Currently, the code displays 3 images with 1 extending outside the box, which is not the desired outcom ...

htmlcssflexbox

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

cssmaterial-ui

Display corresponding div elements upon clicking an HTML select option

Is there a way to make a div visible when a corresponding select option is clicked, while hiding others? My JavaScript skills are lacking in this area. CSS #aaa, #bbb, #ccc { display:none; } The HTML (I'm using the same id name for option and d ...

javascripthtmlcsshtml-select

What is the best way to create a screen capture of a webpage using a URL?

Currently working on a Spring MVC website project, I have implemented a form requesting the user's website URL. Once entered, I aim to display a screenshot of the specified website for the user to view. Contemplating whether to generate the image on ...

javascriptspring

What's causing my pug file to not show the data I retrieved?

In my index.js file, I have confirmed that the data is successfully retrieved using console.log. However, when I attempt to display this data in my view, I encounter an error that says: "Cannot read property 'feedUrl' of undefined. The followin ...

javascriptexpressmongoosepug