Issues with the alignment of the navbar-right in Bootstrap are causing

Just starting out with bootstrap and encountered an issue

I have two different classes for the navbar-header, one I want on the left and the other on the right. I need both to be responsive.

<nav class="navbar navbar-default navbar-fixed-top topnav " style="opacity:0.8" role="navigation">
    <div class="container " >
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class=" topnav" href="#">image1</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-right" >
            <a class=" topnav" href="#">image2</a>
        </div>

    </div>
    <!-- /.container -->
</nav>

When viewed on a mobile device, the right-hand part moves to the bottom instead of staying at the top in both mobile and desktop view.

http://plnkr.co/edit/g1CwhhyDrSoVf3zTRl6E?p=preview

Any assistance would be greatly appreciated. THANKS

htmlcsstwitter-bootstrap

Answer №1

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav " style="opacity:0.8" role="navigation">
    <div class="container " >

      <div class=row>

        <div class="col-xs-6">
          <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class=" topnav" href="#">logo1</a>
        </div>
        </div>


        <div class="col-xs-6">
          <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-right" >
            <a class=" topnav" href="#">logo2</a>
        </div>
        </div>

      </div>

    </div>
    <!-- /.container -->
</nav>

Maybe this solution could work =)

Answer №2

To improve the layout, consider grouping them in a row and then within col-xs-* classes for better alignment.

<nav class="navbar navbar-default navbar-fixed-top topnav " style="opacity:0.8" role="navigation">
    <div class="container">
        <div class="row">

            <div class="col-xs-6">
                <!-- Brand and toggle for mobile display -->
                <div class="navbar-header">
                    <a class="topnav" href="#">image1</a>
                </div>
            </div>

            <div class="col-xs-6">
                <!-- Nav links, forms, and content toggling -->
                <div class="navbar-right">
                    <a class="topnav" href="#">image2</a>
                </div>
            </div>

        </div><!--./row-->
    </div><!--./container-->
</nav>

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 Element IDs for JQuery Tab Implementation

Having two buttons and two divs with paragraphs, I want to create tabs without adding new classes or IDs. Can I achieve tab switching using the existing IDs that end with "_one"? For instance: The first button has the ID "tab_button_one" and the first di ...

javascriptjqueryhtmltabs

HTML links remain enclosed in a box even after the code has been finalized

Hey there, I have written this code and for some reason, every link shared after it is displaying with a black background. I'm new to coding and can't seem to figure out what I'm doing wrong. Any help would be greatly appreciated. a:link, ...

htmlcss

The persistent underline on the tooltip just won't go away

Hey there, this is my first time posting a question here so I hope I got everything right! I'm currently in the process of creating a form for a WordPress site using Bootstrap. I need to incorporate tooltips with Font Awesome icons, but for some reas ...

csswordpressbootstrap-4

Unable to capture HTML form input in $_POST[]

I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...

javascriptphpjqueryhtmlajax

Common Error for Novice HTML/CSS Learners

I am currently enrolled in an introductory web design course on Treehouse, and I have encountered a problem with centering a class in HTML using CSS. Despite following the instructions closely, my code is not displaying correctly. Can someone please review ...

htmlcss

Sending a concealed input according to the chosen option

I'm attempting to send some hidden values to a Servlet via a form, but my goal is to only pass them if the user chooses a specific option. <!-- FORM ABOVE --> <input type="hidden" name="foo" id="foo" value="foo"> <input type="hidden ...

javascripthtmlformsservletshidden-field

Storing JSONP data in a variable: Tips and Tricks

Having an issue with storing JSONP data into variables and using it as input for a Google Pie Chart. Consider the following: Data in test.json: { "name": "ProjA", sp": 10, "current": 20 } The goal is to retrieve the SP value. Attempted solution usin ...

javascriptjqueryhtmljsoncharts

Utilizing CSS to create a text box with angled left and right edges

.soccer-field{ width: 50%; box-shadow: 0 4px 12px 4px rgba(0,0,0,0.2); } .text-sf p{ float:left; } .right-curve{ float:right; width: 0; height: 0; border-style: solid; ...

csshtml

Optimizing jQuery Dialog for Different Window Sizes

I am currently developing a responsive website and facing a challenge. I need to implement a popup for window sizes smaller than 480px, but on desktop screens, the content should be visible without being inside the popup. I want to avoid duplicating the co ...

javascriptjquerycssresponsive-design

Uncovering the "parent having two child elements" structure from HTML: A guide

I want to identify all parents with two children in an HTML document. Case 1 <parent> <child> <tag></tag> </child> <child></child> </parent> Case 2 <parent> <parent_and_child> <tag& ...

javascriptjqueryhtml

Receive alerts in Swift from WKWebView when a particular screen is displayed in HTML

Check out this sample HTML file I have. I'm currently using the WKWebView to display this HTML. My goal is to receive a notification in our Swift code when the user finishes the game and the "high score" screen appears, so we can dismiss the view and ...

javascripthtmliosswiftwkwebview

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

javascriptjqueryhtmlcss

The function for clicking is malfunctioning

I've been working with a table where I can dynamically add rows using the clone function, as shown below: new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last&apos ...

jqueryhtmlclickonclick

Insert fresh user information into the div

Learning JavaScript is a challenge I'm tackling. I have a question that may seem trivial, but any assistance would be greatly appreciated. I currently have this code: Javascript <script type="text/javascript"> function fn(){ var Name = ...

javascripthtml

Increase the size of the embedded iframe in your Cordova application by using the pinch-to-zoom

I have been struggling with this issue for the past few days and am having trouble finding a solution.. I am trying to figure out how to embed an iframe in a cordova app (running on an iOS device) to display an external webpage while allowing users to pin ...

javascripthtmlioscordovaiframe

Properly spaced website images

I'm trying to display my images side by side with a slight margin in between them. However, when I apply a `margin-right: 10px;` to each div, the last image doesn't line up properly with my title bar. Is there a way to create spacing between the ...

htmlcssmarginspacing

Tips on replacing a React component's styling with emotion CSS

Is there a way to incorporate the background-color:green style to the <Test/> component in the following example without directly modifying the <Test/> component? /** @jsx jsx */ import { css, jsx } from "@emotion/core"; import React from "r ...

cssreactjsemotion

Include an edit button with each row in an HTML table for seamless editing of the database

I am currently exploring php and seeking assistance with a project for my internship. I have successfully queried all records from the mysql database and displayed them in an html table. However, I now want to include an edit button in a separate column fo ...

phphtml

Steps to reverting CSS attributes back to their default values for a specified element (or blocking inheritance)

How can you reset a specific CSS attribute of an HTML element, which is automatically inheriting styles from its parent, to the default value? For example: CSS: .navigation input { padding: 0; margin: 0 30em; } HTML <div class="navigation"& ...

htmlcss

Transitioning backgrounds in a slideshow

I am attempting to create a unique slideshow effect for my page background by changing the image URL at specific intervals with a smooth fade in and fade out transition. However, I am faced with the challenge of figuring out the best way to achieve this. ...

htmlcssurlbackground