Issue with title position when hamburger menu opens

My title, "Roberto Salas," is not staying in place when I resize the window or view it on my cellphone. You can see an example of this issue here.

If the hamburger menu button drops down, the title is also not in the correct position. See an example here.

I want the title to stay in the top-left corner. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Roberto Salas</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="wrapper">
    <header>
      <nav>
        <div class="menu-icon">
          <i class="fa fa-bars fa-2x"></i>
        </div>

        <div id="Title" class="name">Roberto Salas</div>

        <div class="Monse">
          <ul >
            <li><a href="#" class="submenu2" >Home</a></li>
            <li><a href="#" class="submenu2" >About</a></li>
            <li><a href="#" class="submenu2" >Blog</a></li>
            <li><a href="#" class="submenu2">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>

    <div class="content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>

  <script type="text/javascript">
    // Menu-toggle button
    $(document).ready(function() {
      $(".menu-icon").on("click", function() {
        $("nav ul").toggleClass("showing");
        $('#Title').addClass('name2');
        $('a').css('color','white');
      });
    });

    // Scrolling Effect
    $(window).on("scroll", function() {
      if($(window).scrollTop()) {
        $('nav').addClass('black');
        $('#Title').addClass('name2');
        $('a').css('color','white');
      }

      else {
        $('nav').removeClass('black');
        $('#Title').removeClass('name2');
        $('a').css('color','black');
      }
    })
  </script>
</body>
</html>

Here is my stylesheet:

 html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}
.Monse{
    letter-spacing: 2px;
      font-family: 'Montserrat', sans-serif;
}



body {
      font-family: "Helvetica Neue",sans-serif;
      font-weight: lighter;
}

header {
      width: 100%;
      height: 100vh;
  background: url(img/bosqueaves.jpg) no-repeat center;
      background-size: cover;
}



.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
}


.name{
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: black;
      font-size: 20px;
      letter-spacing: 2px;
      font-family: 'Montserrat', sans-serif;
}

.name2{
    line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: white;
      font-size: 20px;
      letter-spacing: 2px;
      font-family: 'Montserrat', sans-serif;

}

.smenu{
    text-decoration: none;
      font-size: 16px;
    color: white;
}

.submenu2{
     text-decoration: none;
      font-size: 16px;
    color: black;
}




nav {
          position: fixed;
          width: 100%;
          line-height: 60px;
    }



nav ul {
      line-height: 60px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
      text-decoration: none;

}

nav.black ul {
      background: #000;
    text-decoration: none;

}

nav ul li {
      display: inline-block;
      padding: 16px 40px;;
    text-decoration: none;

}




      .menu-icon {
              line-height: 60px;
              width: 100%;
              background: #000;
              text-align: right;
              box-sizing: border-box;
              padding: 15px 24px;
              cursor: pointer;
              color: white;
              display: none;
        }



 @media(max-width: 786px) {

          .logo {
                position: fixed;
                top: 0;
                margin-top: 16px;
          }

          nav ul {
                max-height: 0px;
                background: #000;
              text-decoration: none;
          }

          nav.black ul {
                background: #000;
              text-decoration: none;
          }

          .showing {
                max-height: 34em;
          }

          nav ul li {
                box-sizing: border-box;
                width: 100%;
                padding: 24px;
                text-align: center;
              text-decoration: none;
          }

          .menu-icon {
                display: block;
          }

    }

You can also view the website at this link.

javascripthtmljquerycssbootstrap-4

Answer №1

To align the class .name, you can include top: 0. Additionally, within the media query, specify color: white.

.name{
      line-height: 60px;
      position: fixed;
      top: 0; /* Ensure alignment with top */
      float: left;
      margin: 16px 46px;
      color: black;
      font-size: 20px;
      letter-spacing: 2px;
      font-family: 'Montserrat', sans-serif;
}

@media(max-width: 786px) {
  /* Change text color to white in this breakpoint */
  .name {
    color: white;
  }
}

Answer №2

To implement the div with the specified name:

<div id="Title" class="name">
  Roberto Salas
</div>

Above the <div class="menu-icon> in your code snippet.

Make sure to adjust the color of the name on smaller screens since it currently blends in with the navigation bar.

For example:

@media(max-width: 786px) {
  .name {
    color: pink;
  }
}

Check out this link for a live example.

Answer №3

Don't forget to include the following CSS in your stylesheet: 

nav{display:flex; flex-direction:column;}
`

nav{display:flex;
flex-direction:column;}
Here is my style sheet

 html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}
.Monse{
    letter-spacing: 2px;
      font-family: 'Montserrat', sans-serif;
}

body {
      font-family: "Helvetica Neue",sans-serif;
      font-weight: lighter;
}

header {
      width: 100%;
      height: 100vh;
  background: url(img/bosqueaves.jpg) no-repeat center;
      background-size: cover;
}

.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
}


.name{
      line-height: 60px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      color: black;
      font-size: 20px;
      letter-spacing: 2px;
      font-family: 'Montserrat', sans-serif;
}

.name2{
    line-height: 60px;
      position: fixed;
      
      float: left;
      margin: 16px 46px;
      color: white;
      font-size: 20px;
      letter-spacing: 2px;
      font-family: 'Montserrat', sans-serif;
}

.smenu{
    text-decoration: none;
      font-size: 16px;
    color: white;
}

.submenu2{
     text-decoration: none;
      font-size: 16px;
    color: black;
}

nav {
          position: fixed;
          width: 100%;
          line-height: 60px;
    }

nav ul {
      line-height: 60px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      padding: 0;
      text-align: right;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
      text-decoration: none;

}

nav.black ul {
      background: #000;
    text-decoration: none;
}

nav ul li {
      display: inline-block;
      padding: 16px 40px;;
    text-decoration: none;
}




      .menu-icon {
              line-height: 60px;
              width: 100%;
              background: #000;
              text-align: right;
              box-sizing: border-box;
              padding: 15px 24px;
              cursor: pointer;
              color: white;
              display: none;
        }


 @media(max-width: 786px) {

          .logo {
                position: fixed;
                top: 0;
                margin-top: 16px;
          }

          nav ul {
                max-height: 0px;
                background: #000;
              text-decoration: none;
          }

          nav.black ul {
                background: #000;
              text-decoration: none;
          }

          .showing {
                max-height: 34em;
          }

          nav ul li {
                box-sizing: border-box;
                width: 100%;
                padding: 24px;
                text-align: center;
              text-decoration: none;
          }

          .menu-icon {
                display: block;
          }
         
    }
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Roberto Salas</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet"> 
</head>
<body>
      <div class="wrapper">
            <header>

                  <nav>

                        <div class="menu-icon">
                              <i class="fa fa-bars fa-2x"></i>
                        </div>

                        <div  id="Title" class="name color">
                             Roberto Salas
                        </div>

                        <div class="Monse">
                              <ul >
                                  <li><a href="#" class="submenu2" >Home</a></li>
                                    <li><a href="#" class="submenu2" >About</a></li>
                                    <li><a href="#" class="submenu2" >Blog</a></li>
                                    <li><a href="#" class="submenu2">Contact</a></li>
                              </ul>
                        </div>
                  </nav>

            </header>

            <div class="content">
                  <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </p>
                  <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </p>
            </div>
      </div>

      <script type="text/javascript">

      // Menu-toggle button

      $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                  $("nav ul").toggleClass("showing");
                  
                  $('a').css('color','white');
            });
      });

      // Scrolling Effect

      $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                  $('nav').addClass('black');
                  $('#Title').addClass('name2');
                  $('a').css('color','white');
            }

            else {
                  $('nav').removeClass('black');
                  $('#Title').removeClass('name2');
                  $('a').css('color','black');
            }
      })


      </script>

</body>
</html>

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

Synchronize your store by utilizing cookies in the nuxtServerInit function of NuxtJS

I am currently working with NuxtJS's auth module and attempting to retrieve the Bearer token along with a custom cookie that holds a sessionType during nuxtServerInit in order to update the store through a mutation. However, I am facing an issue where ...

javascriptvue.jsnuxt.js

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...

javascriptjquerycssresponsive-designgeometry

The API results are able to be displayed in the console, but unfortunately cannot be shown on the user interface. Any efforts to map the results will result in an Un

Can anyone help me troubleshoot an issue with displaying information from a free API on my page? I'm developing a cryptocurrency app using React, and while I can see the array data with console.log(response.data), I encounter an error when I try to se ...

javascriptreactjsaxios

Resend the octet-stream data from an external API

I'm currently facing a challenge with retransmitting data received as octet-stream from an external API in my nodejs application. My previous attempts to convert the API response into a buffer and send it using res.write(buffer(apiResponse.data)) have ...

javascriptnode.jsexpress

The modal box appears to be malfunctioning

I am attempting to open the abc.html file (located in the same directory) in a modal box. Here is the code I am using, however, it doesn't seem to be working. Any assistance would be greatly appreciated. <!DOCTYPE html> <html> <head ...

javascriptjqueryajaxmodal-dialog

JavaScript Array join() method returns an empty string

As a beginner in the world of javascript, I am just starting to dip my toes into it. In the past, I have used join() without any issues, but now I am facing a problem where this join is returning an empty string. Upon inspecting myArray, the data seems t ...

javascript

What is the best way to execute JavaScript on the main MVC page when an AJAX request in a partial view has finished?

My Asp.net MVC partial view is designed for searching and makes an Ajax call to retrieve results. After the results are displayed, the user can select a search result by clicking on a link in one of the rows. Upon selecting a search result, an Ajax post re ...

javascriptajaxmodel-view-controllerpartial-views

Creating an effective follow-following system in Node.js

I have built a Node.js application that features a basic follow system, allowing users to receive the latest articles from those they follow. The current implementation involves creating an array called followers, which stores the userIDs of all users fol ...

javascriptnode.jsmongodbexpress

Finding the perfect label for effective web scraping with rvest

I am struggling to identify the correct tag to extract the specific text from a webpage. The HTML snippet in question is provided below. The text I am aiming to scrape is "Melbourne Storm has achieved 4 tries Brisbane Broncos has achieved 2 tries" Despite ...

htmlcssrweb-scrapingrvest

Issues with FF6 CSS Javascript MozBorderRadius functionality not functioning as expected

While attempting to set the border radius using JavaScript in Firefox 6, I'm experiencing some issues. Interestingly, when I use the same code with WebkitBorderRadius on Safari, it works perfectly. that.element.style.WebkitBorderRadius = '10px&a ...

javascriptcss

Tips for looping through multiple states within a single table

I need help with combining data from two different states, campaigns and stats, into a single table. The campaigns state includes sr no, campaign id, campaign name, and campaign status, while the stats state includes reach, sent, delivered, views, clicks ...

javascriptarraysreactjsobject

I'm experiencing very slow page load times in dev mode with Next.js (30s+). What could be the reason behind this sluggishness?

QUESTION: Encountering a similar issue (but with different files): https://github.com/vercel/next.js/discussions/17977 I've already tried all the suggestions provided in that discussion. This is what the page load process looks like in development ...

javascriptnode.jswebpacknext.js

Naming small cells in HTML table columns/rows

I'm currently developing an application that accepts an image as input and displays it within an HTML table, with each cell representing a pixel. To provide visual reference, I am numbering every other column and row on the table. However, I've ...

htmlhtml-table

Populate DataGrid using an input through AJAX and jQuery technology

I've been grappling with a persistent issue that's been bothering me for days now. Here's the scenario: Currently, I have a DataGrid that is empty and an Input Text field in place that utilizes AJAX and jQuery to display a list of available ...

javascriptjqueryasp.netajaxdatagrid

What are the steps to implement IndexedDB in an Angular application?

I'm searching for a solution to utilize indexedDB within Angular. I need assistance with implementing data recovery or potentially using a browser-based database that doesn't have the 5 MB limit like localStorage. Can anyone point me in the right ...

javascriptdatabaseangularreactjstypescript

The head.js feature similar to "Modernizr" does not recognize ms-edge

It has come to my attention that the head.js script is unable to detect the Microsoft "Edge" browser correctly. In addition, it erroneously adds classes like chrome and chrome55 to the <html> element. Is there a better way to handle this issue? The ...

javascriptangularjsuser-agenthead.js

Offspring component fails to reverse the skew as intended

Is it possible to skew a navigation bar without affecting the text inside it? I tried skewing the main div of the navigation bar and using a negative skew value on the text, but it didn't work as expected. How can I achieve this effect successfully? ...

htmlcss

"Implementing a feature in React JS react-table to dynamically add a new column when a

I'm struggling to add a new column to react-table when a button is clicked. Even after re-rendering the table with a flag, I can't seem to add the new column. Can anyone suggest where I might be going wrong? Here's the link to the executable ...

javascriptreactjsreact-table

How can I retrieve the file name and any other requested parameters in the serveResource method using an ajax call?

I'm currently utilizing ajax to submit the data on my jsp page in a liferay custom portlet without needing to refresh the entire page. Unfortunately, I've encountered two issues with this approach: Although the Ajax function successfully pas ...

ajaxjqueryfile-uploadportletliferay-6

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

javascripthtmlcss