The fixed navbar in Bootstrap is missing a bottom margin

I have created a basic theme using bootstrap 4. The navbar in this theme has a fixed-top class. Right below the navbar, there is a div that displays the page title as its content.

<div class="aloldal_text_div">
<div class="container">
    <h1><?php get_site_cim($siteID); ?></h1>
</div>

However, I am facing an issue where this div seems to be overlapping with the navbar. Even after giving it some margin-top, the issue persists and I believe it may be due to the fixed navbar.

https://i.sstatic.net/20DCf.jpg

Could someone offer guidance on how to resolve this problem? You can view my website through this link: Click here.

Thank you for your help.

htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

provide a margin-top value for .aloldal_text_div equal to your header's height

.aloldal_text_div{
   width: 100%;
   padding: 20px 0;
   background:#d3bf84;
   color:#fff;
   margin: 67px 0 0; /*adjust this value*/
}

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

Responsive Text in HTML Email Depending on Device

I currently have an email template that is functioning perfectly, but I am looking to take it to the next level. The top navigation of the email consists of 4 columns of text. To ensure that it appears well on both desktop and mobile devices, the font size ...

htmlcssmedia-querieshtml-emailemail-templates

Javascript - issue with accurately retrieving element offset value while scrolling

My goal is to dynamically change classes for elements based on their position during scrolling. I am trying to calculate the top offset element value and adjust the classes accordingly. Here is the function I am using: handleScroll () { const header = ...

javascripthtmlcss

Interval function not initiating properly post bullet navigation activation

Currently, I am experiencing an issue with my custom slider where the auto sliding set interval function is not working after using the bullet navigation. Despite trying to implement "setTimeout(autoSlide, 1000);", it doesn't seem to be resolving the ...

javascriptjqueryhtmlcss

What is the process for changing the color of a button upon clicking with bootstrap?

Is there a way to specifically change the color of a button in Bootstrap when it is clicked? I have multiple buttons and only want the one that is clicked to change its color. Any help would be appreciated. Thanks! ...

jquerytwitter-bootstrap

Allow access only to authorized staff members in Django

So I'm working on this Django code and I want to display a button only if the user is either a super user or staff. I've tried using is_superuser and is_staff but it's not working for me. {% if request.user == post.user %} <div class=&qu ...

pythonhtmldjango

Display only the div on an iPad screen

Is there a way to show this DIV only on an iPad screen? I've looked around on Google for solutions, but none of them seem to work. It always ends up displaying on my computer as well. Is it possible to make it show only on an iPad screen? @media only ...

cssipad

The Ajax contact form is not submitting the necessary POST data to the PHP script

After creating an html form with ajax: function confirmSendMail() { $(".send_contact").click(function(event){ event.preventDefault(); var name = $("#inputName").val(); var email = $("#inputEmail").val(); var pho ...

phphtmlajax

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

javascripthtmlbuttontoggle

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

javascriptjqueryhtmlcss

Adding a Unique Custom Menu Item in _tk Wordpress Theme: Incorporating a Button and Search Form

I am currently working on customizing the _tk theme for WordPress, and I have hit a roadblock when it comes to the Nav Menu functionality. Adding menu items from the WordPress admin page is easy for custom links and pages. However, I am looking to include ...

phpcsswordpresstwitter-bootstraphook

Tips for seamlessly integrating an overlay into a different image

My current system is set up to overlay the image when you check the checkboxes. However, I'm facing an issue with positioning the image inside the computer screen so it's not right at the edge. Can anyone provide assistance with this? <html&g ...

javascriptjqueryhtmlcss

The issue with Bootstrap 4 modal not closing persists when loading content using the .load() function

Having an issue with my Bootstrap 4 modal, as I'm loading the body content externally using .load(), but it's not closing when I click on the close buttons. Any help would be highly welcomed. JavaScript Code Used: if(status){ $('#cartMe ...

javascriptjqueryajaxtwitter-bootstrap

Display text on screens size small or larger with Bootstrap 4 and always show FontIcon

I am working on a tabbed interface where I am using .nav. My goal is to have the FontIcon always visible, but the text should only appear on screens larger than sm. Currently, the code below displays the Icon on XS screens and the Text on all others: < ...

bootstrap-4responsive-design

Incorporate functionality into a button using jQuery

I am working on a table that displays data in different levels (Parent, Child, Grandson). When I click on the parent row, it expands to show new rows related to the child level. Similarly, clicking on a child row reveals a third level known as the grandson ...

javascriptjqueryhtmlcss

The dimensions of the image are determined by its orientation

I am working with two different types of images on my website: vertical and horizontal. Currently, I have a JavaScript function that adjusts the height of all images to fit the screen size. However, I would like to modify this function so that it also adap ...

javascriptjqueryhtmlcss

Unable to use the select function in Android 2.2

When I click on the select button in my app, it displays multiple options. This functionality works smoothly on Android 4.1, but on Android 2.2, clicking on the select button does not have any effect and therefore the options cannot be selected. <sec ...

androidjqueryhtmlcss

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback

Load image in index.html for use on a different webpage

I'm looking to preload a large image that serves as the background on another page of my website. By preloading this image, I hope to ensure that when users first visit my webpage, the image is ready to load instantly when they eventually navigate to ...

htmlimagepreload

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries