Place the logo/brand on the right side

I am attempting to position the brand/logo on the right side of my navbar, but I am facing an issue where the logo remains inside the collapse menu when viewed on mobile devices.

Here is the correct positioning in desktop view: https://i.sstatic.net/ZNxm9.png

However, when switching to mobile view, the logo overlaps with the menu opening downwards:

https://i.sstatic.net/aChtk.png

Below is the code snippet that I am working on:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-sika">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rooms</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Garages & Parking Lots</a>
            <a class="dropdown-item" href="#">Kitchens & Bathrooms</a>
            <a class="dropdown-item" href="#">Bedrooms & Living Rooms</a>
            <a class="dropdown-item" href="#">Balconies & Terraces</a>
            <a class="dropdown-item" href="#">Swimming Pools & Water Tanks</a>
            <a class="dropdown-item" href="#">Façades</a>
            <a class="dropdown-item" href="#">Sloped Roofs</a>
            <a class="dropdown-item" href="#">Flat Roofs</a>
            <a class="dropdown-item" href="#">Basements & Retaining Walls</a>
            <a class="dropdown-item" href="#">External Thermal Insulation</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">100 Solutions</a>
        </li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#pos">Store Locations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#registo">Registration</a>
        </li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#contacto">Contact</a>
        </li>
      </ul>
    </div>
    <a class="navbar-brand" href="#">
      <img src="img/logo_sika_pt_02.png" width="225" height="45" class="d-inline-block align-top" alt="">
    </a>
  </div>
</nav>

I have borrowed this code from a template and now making modifications as needed.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To align your button to the right, you should rearrange the elements in your code so that the .navbar-brand class is placed above it and has a float: right property. Don't forget to clear the float within your .container class afterward.

Answer №2

Consider exploring the pull-right feature of bootstraps to ensure the image remains on the right side.

Answer №3

Did you remember to include any @media declarations in your code? It's important to set minimum and maximum widths for different views such as desktop and mobile.

Take a look at this sample HTML and CSS:

<header>
    <div class="container">
        <div class="topnav">
            <div class="brand">
                        <a href="https://oursite.com" data-sync-host="www" title="Our Site Home">
                            <div class="header-logo" alt="Our Site Logo"></div>
                            <div class="header-logo-icon" alt="Our Site Logo Icon"></div>
                        </a>
            </div>
        </div>
    </div>
 </header>

<div data-nav-mobile-backing="" class="exclusive-window-wrapper nav-mobile-backing hidden" style="">
            <div class="nav-mobile container">
                <div data-nav-mobile="">

                    <div class="linkset-section" data-nav-mobile-section="platform">
                        <h2 data-nav-mobile-link-opener="" class="opener" aria-expanded="false">Products</h2>


<div class="mobile">
                            <button class="reset mobile-open" data-nav-mobile-toggle="" aria-expanded="false"><i class="fa fa-fw fa-bars"></i></button>
                            <button class="reset mobile-close hidden" data-nav-mobile-toggle="" aria-expanded="true"><i class="fa fa-fw fa-times"></i></button>
                        </div>

@media (max-width: 992px)
header .topnav {
    position: relative;
    text-align: center;

header .topnav>div {
    display: inline-block;
    float: right;
}
@media (max-width: 736px)
header .brand {
    width: 30px;
    padding-top: 2.5px;
}

header .brand {
    left: 0;
    width: 155px;
    margin-top: 15px;
}

.exclusive-window-wrapper.hidden {
    display: block !important;
    visibility: visible !important;
    left: 423px;
    right: -423px;
}

.nav-mobile-backing {
    background-color: #2D2D2D;
}

.exclusive-window-wrapper {
    z-index: 10;
    overflow: hidden;
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    left: calc(100% - 320px);
    transition-property: left,right;
    transition-duration: .5s;
}

.hidden {
    display: none!important;
}


.nav-mobile {
    max-width: 320px;
    padding: 0;
    font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #FFF;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

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

Utilizing HTML input elements for focus and blur events

I'm attempting to style an input text field with a thick blue border when in focus, and then have it revert back to its default border when no longer in focus. Here is how one of my input fields is currently defined: <input onfocus="this.style.bor ...

htmlinputonbluronfocus

Unable to access the following element using jQuery's next() method

Can someone help me understand how the "next" function works in jQuery? I'm trying to reveal a hidden textarea when a span element is clicked. The hidden textarea is supposed to be the immediate next sibling of the span, but it's not working as e ...

javascriptjqueryhtmlcss

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

htmlcssangulartypescriptvaadin

Is the ctx.arc method in Javascript able to determine the vertices based on the pixel size and radius?

When working with Javascript's Canvas, you have the option to draw a circle easily using the ctx.arc method. I'm curious, does the arc function automatically calculate the optimal number of vertices needed to draw a circle in order to achieve the ...

javascripthtmlcanvasdrawingrendering

What could be preventing this bootstrap carousel slider from transitioning smoothly?

I've created a CodePen with what I thought was a functional slider, but for some reason, the JavaScript isn't working. The setup includes bootstrap.css, jquery.js, and bootstrap.js. I'm having trouble pinpointing what's missing that&apo ...

javascriptjquerycsstwitter-bootstrapcarousel

I'm looking to add some borders to my image using bootstrap/CSS - does anyone know how this can be achieved

I have designed the UI, but I'm struggling to create the border effect shown in the image below: https://i.sstatic.net/Jdp17.png <div> <img class='image1' src='https://www.w3schools.com/w3css/img_lights.jpg' /> ...

cssbootstrap-4

I'm trying to determine which jQuery event would be more beneficial for my needs - should I go with

I'm facing a dilemma On my website, I need to capture the value of a span within a modal. The value changes when the modal is opened and reverts to the old value when closed. This particular value represents the cart total in my online store. Wheneve ...

javascriptjquerycssevents

Tips for creating a star program using Angular 2+

Create an Angular 2+ code snippet that will print asterisks (*) in a list on button click. When the button is clicked, it should add one more asterisk to the list each time. For example: Button Click 1 - Output: * Button Click 2 - Output: ** Button Cl ...

htmlangulartypescriptngfor

What steps should be taken to incorporate that dynamic sliding element (like a sliding screen paper) on the webpage?

When hovering over the leftmost part of the homepage at www.techants.com, a box shifts to the foreground. I examined the code and noticed a reference to something called screen paper. Does anyone know which script is being used for this effect? How can I ...

phpjavascripthtmlcss

The parent node is returning a child element

Currently working on a website using Vue 3.0 and Element+ and encountering an inconsistency. There is a div displayed on the page (an array of objects) and the goal is to remove the object from the array when a button is clicked. The issue arises when som ...

javascripthtmlvue.js

Customizing the width of the Bootstrap DateTimePicker

Jade: td #cpf2.input-group.date input(type="text",value=(event.EDATE),style="width:200px") span.input-group-addon span.fa.fa-calender(aria-hidden="true") script(type="text/javascript") $(function () { $('#cpf2').datet ...

node.jstwitter-bootstrapgoogle-chromepug

What could be causing my divs to overlap?

I recently started coding and I'm facing an issue with my <header> and <section> divs overlapping each other. I was under the impression that being block elements, <section> should be displayed below <header>. Any suggestions o ...

htmlcss

What are some methods to manage the state of Bootstrap 4 modals in React without using jQuery?

Creating a PHP web app with Twig templates has been my latest project. Recently, I've been incorporating ReactJS components for some new forms and replacing existing ones, and I am quite pleased with the outcome. Bootstrap 4 is the framework used for ...

phpjqueryreactjsbootstrap-4

What is the best way to manage the appearance of multiple elements in React simultaneously?

I have a fun little game that I've been working on. Check it out - here In my game, when you hover over a square, it turns blue. If you hover over it again, it turns white. I achieve this by applying styles to the event target on hover. const handleM ...

cssreactjsreact-hooksmaterial-ui

Show images exclusively on screens with a smaller resolution

Looking for assistance in modifying the code below to only display the image in mobile view, instead of constantly appearing. <style type="text/javascript> .icon-xyz {float: left; width: 22px;cursor: pointer;background: none;} @me ...

javascripthtmlcssmedia-queries

Get notified about the number of cells you've selected by simply dragging on a table

Is there a way to display the number of selected cells in a table when dragging with the mouse? I have a table set up, and I'd like to create an alert that shows how many cells are selected while dragging. Here is the link to my fiddle: http://jsfiddl ...

jqueryhtmlcssarrays

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

javascripthtmlcss

Exploring the distinctions among different xpath implementations in Selenium WebDriver

Looking at this snippet of HTML code: <div id="divTooltips_Section_Filter" style="float:right; padding-right: 30px; padding-bottom: 10px;"> <img src="/mkteditor/css/images/tooltip.png" width="25px" height="25px" alt=""> </div> I've ...

htmlxpathselenium-webdriver

The performance of my Wordpress site is being hindered by the slowdown caused by Admin

I have a Wordpress website focused on winter sports vacations in Iceland: link Every plugin, WordPress core, and theme are up to date. Using Woocommerce for my online store. However, activating the Woocommerce plugin causes the site to slow down signific ...

cssajaxwordpressadmin-ajax