Navigation problems resolved: The fixed-top class causes issues with navbar-right and obscures the logo

I have implemented a bootstrap Nav on this page

To achieve a sticky top navigation, I used the fixed-top class. However, this caused the navbar to align left instead of right as intended. It also ended up covering my logo, which was originally aligned to the left.

Additionally, I am facing an issue with the hamburger responsive menu. When opened in responsive mode, the dropdown is stuck to the right of the button, causing the toggle to jump to the middle of the page once the menu is realigned to the right again.

             <!-- <div class="site-nav col-6 col-sm-6 col-md-9">-->
        <nav class="navbar navbar-expand-lg navbar-light bg-nav-bar fixed-top " role="navigation" style="max-width: 1360px; margin: 0 auto;">


    <!-- Brand and toggle get grouped for better mobile display -->

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#"><img src="http://careers.baffinland.com/wp-content/themes/darkStarMediaTheme/images/logo.png" width="236"  alt="Baffinland logo" class="banner-logo " style="float: left; text-align:left; left: 0px;"  /></a>
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul id="menu-main-menu" class="nav navbar-nav navbar-right"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-16 nav-item"><a title="About Us" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-16">About Us</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-16" role="menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17 nav-item"><a title="Who We Are" href="https://www.baffinland.com/about-us/who-we-are/" class="dropdown-item">Who We Are</a></li>

</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-20 nav-item"><a title="Operation" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-20">Operation</a></li>
</ul></div>   
</nav>
       <!--  </div> -->
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Your logo is positioned outside of your navbar, with the "navbar-brand" set to "display-none".

<nav class="navbar navbar-expand-lg navbar-light bg-nav-bar fixed-top" role="navigation" style="max-width: 1360px; margin: 0 auto;">


    <!-- Brand and toggle get grouped for better mobile display -->

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a href="http://careers.baffinland.com/" class="navbar-brand" title="Baffinland Iron Mines" rel="home"><img src="http://careers.baffinland.com/wp-content/themes/darkStarMediaTheme/images/logo.png" width="236" alt="Baffinland logo" class="banner-logo " style="float: left; text-align:left; left: 0px;"></a>
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
        <ul id="menu-main-menu" class="nav navbar-nav navbar-right">
            // Menu items omitted for brevity
        </ul>
    </div>
</nav>

To address this issue, I have placed your logo within the "nav" tag for improved structure. You may want to consider using one of these templates from Bootstrap's documentation to ensure proper functionality: https://getbootstrap.com/docs/4.4/components/navbar/.

Answer №2

Initially, the navbar-right feature functioned properly until I included the fixed-top class. To confirm, you could deactivate fixed-top and test it out for yourself...

Nevertheless, I attempted your suggested fix but unfortunately, it did not yield the desired result. Despite this setback, I am grateful for your assistance...

In lieu of that solution, I opted to simply add right margins to the navbar-brand element and shifted it over to my preferred location

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

I am attempting to showcase a retrieved value in HTML through an AJAX request, with the help of Flask

Hello everyone, I'm fairly new to web development and currently working on a flask application. My goal right now is to test an AJAX function to ensure it's functioning correctly. This function reads radio inputs from HTML, and my aim is to displ ...

pythonjqueryhtmlajaxflask

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

I need assistance with creating a grid of projects where clicking on a specific 'project' in the loop will display the corresponding 'project_expanded' div, while hiding all other 'project_expanded' divs. My initial plan was ...

javascriptphpjqueryhtmlwordpress

When it comes to handling media queries, iPhone is geared towards min-width dimensions of 768

The layout of my landing page has a CSS structure that looks like this: body { background: white; } @media (min-width: 768px) { body { background: red; } } @media (max-width: 767px) { body { background: blue; } } Des ...

cssresponsive-designmedia-queries

Utilizing absolute positioning with a rotated div element

The situation I am facing involves a parent div and child div. The child div is positioned absolutely with respect to the parent div and has been rotated by an angle of 90 degrees. Due to the fact that the origin is located at the center of the child div ( ...

javascriptjquerycssgeometrytransform

What steps do I need to take to launch an embedded kml tour?

This marks the beginning of my journey into the world of online forums! I used to rely on Stack Exchange for answers to my questions, but most of the time, someone else had already asked what I needed to know. It goes to show how effective this website is. ...

htmlrgoogle-mapskmlgoogle-earth

What is the best way to keep a div element fixed at the top of a webpage?

I am facing an issue with a div that contains three SVG files layered on top of each other and meant to be centered on the page. Ideally, when the user scrolls down, I want these SVG files to stick to the top and remain there. In my CSS attempts, I have u ...

htmlcss

What strategies can be employed to address the limitations of a single page application?

Looking to create a dynamic single page application using Vue? Consider checking out either Vuetify or CoreUI for Vue. However, some sources claim that single page applications may not be ideal for SEO. In light of this, I'm considering the use of a m ...

twitter-bootstrapvue.jsvue-componentvuetify.jscore-ui

Enhancing the appearance of the CSS panel with Font Awesome icons

I need help adding a fontawesome or any other icon to my CSS3 based sliding panel button. The icon should change from open to close when clicked on. Any ideas on how to achieve this would be greatly appreciated! * { margin:0; padding:0; font-famil ...

css

Utilizing CSS styling to create page breaks in R Markdown disrupts the flow of table of contents

Encountering difficulties in achieving a visually pleasing document using knitr's export to pdf, I have resorted to converting the html file for my Markdown project to pdf through the wkhtmltopdf command line utility tool. A simplified Markdown docum ...

htmlcssrmarkdownwkhtmltopdf

What is the best way to vertically center all content, including borders, within the columns?

To view the codepen for reference, please click on the following link: http://codepen.io/rezasan/pen/apvMOR I am attempting to align all the content within the columns (Date, Title, and Button, including the separator) vertically. I have tried using displ ...

htmlcssgridvertical-alignmentcss-tables

When working with HTML, how can you prevent the scrollbar from automatically scrolling to the bottom when new data is continuously added to a <textarea> element using AJAX calls?

Is there a way to prevent a textarea on an HTML page from automatically scrolling to the top when new data is entered, causing inconvenience for manual scrolling? ...

htmlajax

IE does not support Overflow and Ellipsis in this table

FF v14 has the exact appearance I want. Unfortunately, IE9 is not cooperating as it does not hide overflow or display the ellipsis. Does anyone know how to resolve this issue for compatibility with IE9? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

htmlcsscross-browser

Responsive Bootstrap 4 Login Form with customized top height

This login form was created using Bootstrap 4, starting with a preset that I then customized to fit my needs. As someone new to Bootstrap and CSS, I struggled with making the form responsive. When resizing the window, the top portion gets cut off and is no ...

htmlbootstrap-4

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

When using the startOffset or text-anchor attributes, I noticed that some characters are missing. How can I fix this issue? Thank you. It appears that in this scenario, the characters `1234` are missing. <svg xmlns="http://www.w3.org/2000/svg" versi ...

javascriptcsssvg

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

cssangulartypescript

Incorporating text into the border without increasing the spacing

I managed to create a unique CSS shape using clip paths as the border of a div. However, I am now facing an issue where I cannot add text to this border without it getting cut off due to the way the shape was created (possibly because of overflow: hidden). ...

htmlcss

Tips for nesting React components within a grid layout

For my News website, I have a component that showcases articles fetched from an API in a grid format. Additionally, I also have a separate component dedicated to displaying the Latest News. I am looking for a way to position the Latest News widget within t ...

cssreactjsgridwidgetposition

Is it possible for Django's trans tags to incorporate HTML tags?

Is it possible for Django trans tags to incorporate HTML tags? For instance, can I use {% trans "Hold <em><strong>Ctrl</strong></em>" %}? Or would I need to use {% trans "Hold" %} <em><strong>{% trans "Ctrl" %}</str ...

htmldjangodjango-templatesdjango-1.8django-tagging

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

jquerycssforms

Design a square confined within an adjustable rectangular container

Looking to fill a rectangular area on my page with a square positioned in the center, regardless of whether the rectangle is horizontal or vertical. Many existing solutions focus solely on creating a square from the width of a containing box, which doesn&a ...

cssautoresize