Creating Overlapping Sections Using Bulma CSS

I'm currently diving into the world of Bulma and aiming to create a simple page layout with the following structure:

<header>
<hero>
<section>
<footer>

However, I'm encountering an issue where these elements are overlapping each other instead of being stacked one below the other.

The problem seems to stem from a misplaced dummy container that is hidden by the header. This overlap becomes even more noticeable with the search bar appearing over parts of both the footer and hero section.

https://codepen.io/anon/pen/bLgOWb

<nav class="navbar is-primary is-fixed-top has-text-white">
    <div class="container">
        <div class="navbar-brand">
            <img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
        </div>
        <div class="navbar-menu">
            <div class="navbar-start">
                <div id="navItem" class="navbar-item">Primo</div>
            </div>
        </div>
    </div>
</nav>
<section class="section">
    <div class="container dummy">
    </div>
</section>
<div class="hero ">
    <div class="container has-text-centered is-size-1">
        <h1 class="title"> Explore and use libraries and software</h1>
    </div>
</div>
<div id="search" class="container">
    <div class="columns searchBlock ">
        <div class="column is-paddingless">
            <form>
                <input class="input searchInput" type="text" placeholder="Search">
            </form>
        </div>
        <div class='column is-3 is-paddingless'>

        </div>
        <div class='column is-2 is-paddingless'>
            <a class='button is-primary  searchButton'>Search</a>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="container is-text-centered">
        <p> Footer </p>
    </div>
</footer>
<script src="old.js"></script>

Answer №1

.hero-body element is not present

<div class="hero">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title"> Discover and utilize various libraries and software tools </h1>
    </div>
  </div>
</div>

For more information, visit Bulma - Hero

Answer №2

There appears to be an issue with the column. Try adjusting the margin of the column like this:

.columns {
     margin: 0;
}

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

Instructions for accessing and printing text from a nested ul tag with Selenium in Java

Hello everyone, I am currently learning about Selenium Automation and have created a website as shown below. Here is the HTML code: <!DOCTYPE html> <html> <head><title>Shop</title></head> <body> <ul> < ...

Enhancing Yii2 Navbar with Icons

I recently started working with Yii2 and I am in the process of creating a simple navigation bar using the built-in widget. The main challenge I am facing is how to include icons next to the menu options. The current state of my navbar is as follows: Na ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Upgrade jQuery visibility and opacity animations to pure JavaScript for a more lightweight solution

Currently I am in the process of removing jQuery from an older website. However, I have encountered a problem with an animation that is currently being used. I have managed to replicate the opacity fade effect, but I am struggling to smoothly transition t ...

Modifying the default actions of Material UI components: A step-by-step guide

In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet: import React from 'react' import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-u ...

How can I style a submit form button with a custom background image?

I'm struggling to apply a background image to my submit button within a form. Despite trying different methods, I keep getting the default browser button. Can anyone pinpoint where my mistake might be? HTML <div id="headerSearch"> <form ...

Changing text color with JQuery animation

Is there a way to animate text color using jQuery/jQuery UI? I want the text color to change from #000 to #F00 when an event is triggered, then fade back to #000 over 3 seconds. I attempted using effect("highlight", {}, 3000) with the highlight effect, bu ...

Several Divs Positioned on Different Pages with Backgrounds That "Scroll"

Currently utilizing: jQuery Mobile 1.4.5 I am interested in knowing if it is feasible to achieve the following, and if so, how to start working on it. At the moment, there are 4 page divs that utilize swipe for navigation between them with a horizontal t ...

Substitute using JQuery

Hello, I am attempting to update some html using Jquery, here is my current progress. $(".old").html($(".new").html()); It's almost working. The problem is that the .new content is being copied instead of replaced. I want to Cut/Paste instead of Co ...

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

Mastering the art of manipulating the Document Object Model in Vue.js

I have a situation where I am using v-for to display a lot of data in JSON as individual buttons. My goal is to change the background color of the button when it is clicked. I plan to use @click to bind a function to each button, and within that function, ...

Connecting CSS styles and images to my EJS templates on a distant Express server using Node.js (Ubuntu 18.04)

I have been hunting for a solution here extensively, but every attempt has failed. So, here's the issue I'm facing: I have created a basic Express server locally to display a static page until I finish full integration. The structure of my site ...

Using makeStyles() in MUI for conditional rendering

Trying to dynamically change the value of backgroundColor under the property "& + $track" using props.disabled but it seems that MUI does not recognize it. Why could that be? const useStyles = makeStyles((theme) => ({ root: { overflow: "vis ...

What is the best way to incorporate a gratitude note into a Modal Form while ensuring it is responsive?

Currently, I have successfully created a pop-up form, but there are two issues that need fixing. The form is not responsive. After filling/submission, the form redirects to a separate landing page for another fill out. Expected Outcome: Ideally, I would ...

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

What could be wrong with my hover command not functioning properly?

I've been attempting to create a dropdown menu using some basic CSS, but I can't figure out why the dropdown isn't functioning. I've tried everything I can think of. Below, I've included the CSS and HTML code for reference: < ...

Tips for enlarging an image by tapping on it in handlebars

I currently have the handlebars template engine integrated with node.js, and I'm facing an issue where thumbnail images from the database are displaying at a fixed width and height of 70. Is there a way to enable users to click on these images in orde ...

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

Adjust the text placement following its entry on the screen

I'm currently facing an issue with my code that involves text sliding in and then moving to the left after the slide completes. How can I ensure that the text remains in place once the slide is finished? <style> div.slide-left { width: ...