Concealing and organizing navigation bar items for mobile devices

Currently, my navbar looks like this on a larger screen:

But here's how it appears on a smaller screen (phone):

What I'm hoping to achieve is to make the U logo on the top left disappear and align "get in touch" closer to the other elements. On larger screens, I used the pull-right class to move "get in touch" to the right. Additionally, rather than having the navbar centered, I'd like it to be spread out 100% horizontally for easier navigation.

Here's the code I'm working with currently:

http://www.bootply.com/G30iN5Ai4u

I attempted to use the .hidden-xs class to hide the logo, but unfortunately, it didn't work as expected.

htmlcsstwitter-bootstrap

Answer №1

Check out this link for a demo: http://www.bootply.com/sGWCci6pBi

Utilize Bootstrap utility classes as follows:

  • visible-xs-block : visible only on mobile devices
  • visible-sm-block : visible only on smaller devices like 'tablet'
  • visible-md-block : visible only on medium devices like 'desktop'
  • visible-lg-block : visible only on large devices like 'desktop'

You can find more examples at: https://github.com/twbs/bootstrap/issues/8883

@eratzlaff suggests :

  • Quick Fix or possible workaround.
  • hidden-sm hidden-md = visible-lg
  • hidden-sm hidden-lg = visible-md
  • hidden-md hidden-lg = visible-sm

Here is a code example:

<nav class="navbar navbar-transparent">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
            </div>
                <ul class="nav navbar-nav navbar-firstnav">
                  <li><a href="#work">work</a></li>
                    <li><a href="#about">about</a></li>
          <li><a href="#skills">skills</a></li>
                 <li class="visible-xs-block"><a href="#contact">get in touch</a></li>
                    <li class="pull-right visible-lg-block visible-md-block visible-sm-block"><a href="#contact">get in touch</a></li></ul>
            </div>
        </nav>

Answer №2

A div closing tag in the HTML code is left open.

To fix this issue, the class hidden-xs should be added to the navbar-header div:

    <nav class="navbar navbar-transparent">
        <div class="container-fluid">
            <div class="navbar-header hidden-xs">
                <a class="navbar-brand" href="./index.html"><img src="./images/logo.png" class="img-responsive logo"></a>
            </div>
            <ul class="nav navbar-nav navbar-firstnav">
                <li><a href="#work">work</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
                <li class="pull-right"><a href="#contact">get in touch</a>
            </ul>
        </div>
    </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

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I am working with a table setup that includes various columns for data tracking: <table > <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;"> <tr> <th colspan="3">& ...

csshtml

What is the best way to layer multiple navigation menus on top of each other using z-index?

I'm facing a challenge trying to position or overlap two navigation menus in my project. The technologies I am using are Bootstrap, HTML, and CSS. It seems like I might need to utilize the z-index property, but I'm unsure about the exact impleme ...

htmlcssz-index

Create a dynamic animation using Angular to smoothly move a div element across the

I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...

javascripthtmlcssangularjs

Maintaining Image Aspect Ratio within a Div with a Specified %width

Apologies for the repeated question, but my research hasn't yielded a solution I can apply. Inside a div with the specified styles, there is an image: <div class="thumb grid_6"> <img src="img/test2.jpg" alt="flavin" /> </div> . ...

htmlcssaspect-ratio

Generate an HTML webpage with dynamic content using MySQL

How can I display data from a MySQL table on an HTML page? The content in my table includes various rows that I would like to show separately on the web page. This is the structure of my table: I envision the web page layout to showcase each row individ ...

phphtmlmysql

Switching from Wordpress to Django and completely revamping the website using only Django

I have a webpage that currently has wordpress.org preinstalled, but I have never utilized it. Now, as I am exploring django, I am interested in using it to build my website instead of relying on wordpress. Can someone guide me on how to transition from wo ...

htmlpython-3.xdjangowordpresshosting

Populate a string with HTML elements

I need help loading a string into UIwebview. The text is plain coming from the database. I want the webview to display the text in bold. How can I add an HTML <b> tag or any other tag to format this simple text sourced from the database? ...

iphonehtmluiwebview

Repeating the process of duplicating with jQuery and inserting after each clone multiple times

Attempting to showcase a dynamic form for my business partner. The aim is to add select elements when the button is clicked, but currently encountering an issue where it duplicates the template twice instead of just once. Experimented with different code ...

javascriptjqueryhtmlmaterialize

Showcase every piece of model information on the HTML website

I'm currently in the process of creating a website that features both products and categories. Within each product page, there is an option to click on a button that will display a list of all the categories that particular product belongs to. Additi ...

pythonhtmldjango

What is causing the error that app.js file cannot be located?

Here is the layout of my directory: ReactCourse // Main folder public // Subfolder within ReactCourse index.html // HTML file with linked js file app.js // JavaScript file This is the content of index.html: <!DOCTYPE ...

javascripthtml

The functionality of ng-style is not compatible with min, and utilizing ng-model produces undesirable results

Why does the ng-style condition not work with min=0 if the saved value of ng-model="detail.Amount" is negative? <input type="number" min="0" oninput="validity.valid||(value='');" class="form-control" title="Amount" ng-model="detail.Amount" ng ...

htmlangularjsvalidation

Angular 6 - Unlocking the Secrets of Filtered Results

I need help accessing the filteredArray in my .ts component. Currently, it is only accessible within the ng-container. <ng-container *ngIf="(userList | filter: 'name' : value) as filteredArray"> <tr *ngFor="let user of filteredArray ...

htmlangularfilter

Error message indicating that the function 'slice' is not defined for the data variable

I've already searched for solutions to a similar issue, but none of them worked for me. I'm dealing with an object that fetches a list of cities including their names, populations, and states. Here is my HTTP service request: cidadesUrl = 'h ...

htmlangulartypescript

Creating a Circular Design with Text at the Center Using CSS

I'm facing a challenge with this https://i.sstatic.net/zQiF8.png The alignment of the icon is off. I would like to adjust it slightly upwards for better presentation. Below is my HTML (angular): // Icon component <div> <i><ng-c ...

htmlcssangular

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down. Despite trying absolu ...

htmlcssbootstrap-5

What is the best way to include a .AVI file in an HTML document?

I have come across some examples of .AVI in HTML on the internet. However, my page seems to be having issues. It displays fine in Chrome on my computer. But in Internet Explorer, there is a bar at the top and the videos appear blank afterwards. It ...

htmlavi

Having Trouble Aligning Contents in a Row Horizontally using Bootstrap 5

My Images are refusing to align in a horizontal row no matter what I try. Output: https://i.sstatic.net/echGV.png .img-size-square { width: 100%; height: auto; max-width: 400px !important; max-height: 400px !important; } .container-f ...

htmlcssbootstrap-5

Phonegap's JavaScript canvas feature is experiencing issues

Recently, I came across a JavaScript bouncing ball animation that works perfectly on the Chrome browser when used on a PC. However, when I tried running it using Phonegap Eclipse Android emulator, I encountered an issue where the canvas appeared blank and ...

javascriptandroidhtmlcordova

To access a form element in JavaScript function, utilize the dynamic form name approach

Currently, I am facing an issue with a JavaScript alert function where I am trying to view the HTML form URL before it is submitted. Following advice from a post on StackOverflow about retrieving form submit content before submit, I attempted to implement ...

javascriptjqueryhtmlformsfunction

The element "center" is not a recognized HTML tag in Angular 4

The center tag is not functioning and it says that center is an unknown element. <center> <a><img class="placeholder_img" src="img/placeholder.png"></a> </center> When I used the above HTML tags, it stated that "center i ...

htmlangular