Problems with navigation alignment in Flask website due to HTML, CSS, and

Here's a snapshot of my current website design: website

I'm attempting to place the Login & Sign up buttons in line with the rest of the navigation bar. I've tried various methods without success so far. My attempts include adjusting text alignment, using non-breaking spaces (which disrupted the layout), and trying to manually close the centering div, resulting in the screenshot shown.

This is the HTML code:

<!-- Navigation -->
<header class="p-3 text-bg-dark">
  <div class="container" style="display: flex;justify-content: center;">
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">Home</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">API</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">Terms</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">FAQ</a></li>
        <li><a href="{{ url_for('core.home') }}" class="nav-link" style="color: #929292; font-size: 16px !important;">Settings</a></li>
      </ul>
    </div>
  </div>
      <div class="text-end">
        {% if current_user.is_authenticated %}
        <a href="{{ url_for('accounts.logout') }}"><button type="button" class="btn btn-danger me-2" style="font-size: 16px !important;">Logout</button></a>
        {% else %}
          <a href="{{ url_for('accounts.login') }}"><button type="button" class="btn btn-primary" style="font-size: 16px !important;">Login</button></a>
          &nbsp;
          &nbsp;
          <a href="{{ url_for('accounts.register') }}"><button type="button" class="btn btn-success" style="font-size: 16px !important;">Sign up</button></a>
        {% endif %}
          
      </div>
    </div>
  </div>
</header>

This is from my bootstrap base.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SMS Simbi</title>
    <!-- meta -->
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- styles -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4e8f4ea">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet""...
htmlcssflask

Answer №1

To achieve the desired header height, set the header element to a specific value like 10rem and apply the classes: d-flex, justify-content-center, and align-items-center:

<header
  class="p-3 text-bg-dark d-flex align-items-center justify-content-center"
  style="height: 10rem"
>...</header>

To center the menu buttons using absolute positioning, add a 'right' value to position them:

        <div class="position-absolute" style="right: 1.25rem">
            {% if current_user.is_authenticated %}
            <a href="{{ url_for('accounts.logout') }}"
                ><button
                    type="button"
                    class="btn btn-danger me-2"
                    style="font-size: 16px !important"
                >
                    Logout
                </button></a
            >
            {% else %}
            <a href="{{ url_for('accounts.login') }}"
                ><button
                    type="button"
                    class="btn btn-primary"
                    style="font-size: 16px !important"
                >
                    Login
                </button></a
            >
            &nbsp; &nbsp;
            <a href="{{ url_for('accounts.register') }}"
                ><button
                    type="button"
                    class="btn btn-success"
                    style="font-size: 16px !important"
                >
                    Sign up
                </button></a
            >
            {% endif %}
        </div>

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

jQuery inserts a closing tag before reopening it when applying .before()

I have the following HTML code: <ul> <div> <li>a</li> <li>b</li> <li class="break">c</li> <li>d</li> <li>f</li> ...

jqueryhtmldom-manipulation

Incorporate row numbering feature into jQuery DataTables

Is there a way to have jQuery datatables generate a row number column in the first column, similar to a datagrid in VB? This is what I'm aiming for: If you have any insights on how this can be achieved, please share! ...

jqueryhtmldatatables

Creating a static line or separator based on the content using HTML and CSS

Is there a way to adjust the height of a line or divider based on the content of either the left or right section? For instance, if we have a left panel and a right panel, and we draw a line or divider on the left side panel, is it possible for the line ...

htmlcss

Modify section background color for every iteration in an image carousel

Is it possible to dynamically change the background color of the cd-hero section each time a new image is loaded in a simple slider on the home page? Can this be achieved by storing predefined colors in an array so that different images trigger different b ...

javascriptjqueryhtmlcss

Is it possible to create a CSS1 sprite animation triggered by a mouse hover

Is there a way to create sequential image loading on mouse hover for a CSS1 Sprite, similar to an animation? Please refrain from suggesting CSS3 solutions as not all browsers fully support CSS3 animations. Thank you. ...

cssanimationhovermousesprite

Unable to position a div alongside a fluid div with minimum and maximum widths

Within this container, there is a div. #leftBanner { height: 100%; background-color: #CCC; width: 22%; min-width: 245px; max-width: 355px; float: left; } This particular div doesn't cooperate when I try to float another div next to it. While I could ...

htmlcss

Mapping memory for FirefoxOS is like equivalent strides

Is there a way to create a memory mapped file in FirefoxOS, Tizen or other pure-JS mobile solutions? In the scenario of a mobile browser where you have large amounts of data that can't fit in RAM or you prefer not to load it all at once to conserve R ...

javascripthtmlfirefox-ostizengaia

Suggestions for incrementing a button's ID every time it is clicked

I am working on a button functionality that increases the button id when clicked. Below is the HTML code for the button: <input type="button" id="repeataddon-1" name="repeataddon" class="repeataddon" value="add" > Accompanied by the following scr ...

javascripthtmlyii2

Tips for transferring PHP variable from a drop down menu

Hello, I am currently working on creating a dropdown menu using the <select> tag. My goal is to have it so that when someone clicks on one of the options in the dropdown, a new window opens. Additionally, I want the PHP variable from the main page to ...

phpjavascripthtml

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

When an HTML element extends beyond the screen's right boundary, it becomes truncated

My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible ...

htmlcssreactjsmaterial-designmaterial-ui

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

htmlcssbuttonmouseeventstylesheet

What is the best way to fetch images from a JSON object in a React application?

I have been trying to load images from an array of objects in React, but I keep encountering a "module not found" error. This issue has been frustrating me for the past couple of days. Can someone please help me troubleshoot this problem or provide some su ...

javascripthtmljsonajaxreactjs

Content within a div that is floated left

The scenario at hand is: HTML Structure: <div id="main"> <div id="a"></div> <div id="b">Some Text</div> </div> CSS Styles: #a{ float:left; width:800px; height:150px; background-color:#CCC; } ...

csshtmltextcss-float

Twitter Bootstrap navbar-collapse can be seen overlapping navbar-header section, causing a

I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...

htmlcsstwitter-bootstrap

What is the method for identifying the name of a CSS Variable currently in use?

Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...

javascriptcssvariables

Spinning Circle with css hover effect

I have recently developed a simple website: Within this website, there is an interesting feature where a circle rotates above an image on hover. However, despite my best efforts, I couldn't make it work as intended. Here's the code snippet I use ...

htmlcss

How to Set a Button as Inline Text in a React Native Component

Below is the code snippet I am working with utilizing the Text and Button components provided by react-native-paper: <Text>See also </Text> <Button mode="text" compact onPress={this.nav( name )}>Compass</Button> <Text&g ...

cssreact-nativebutton

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml

Extension for web design snippet

My program creates dynamic html documents using specific parameters, but there is one section that remains static and is pulled from a local text file. What would be the most appropriate file extension to use for this particular snippet? htm(l): Although ...

htmltext-filesfile-extensiondynamically-generated