Tips for placing text alongside a logo while maintaining navigation links on the right side

I am a beginner in the world of CSS and have been working on a practice project. However, I am struggling to achieve what the title suggests.

I attempted using the margin-right: auto method that I've learned from various tutorials, but it only ends up centering the title.

Below is a snippet of the code I am working with:

.logo {
  cursor: pointer;
  margin-right: auto;
  margin-left: 1.5rem;
  height: 3rem;
  width: auto;
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto;
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}
<header>
  <img class="logo" src="./Images/ic-logo.svg" alt="logo">
  <div class="title">
    <span class="title1">COLMAR</span>
    <span class="title2">ACADEMY</span>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

I am aiming to relocate the title beside the logo while maintaining the navigation bar links aligned to the right side.

Your assistance or guidance on this matter would be greatly appreciated.

cssflexbox

Answer №1

Follow these steps:

  1. Avoid using justify-content: flex-end; in the header.
  2. The logo does not require margin-right:auto. Instead, ensure that the title has margin-right: auto;

Refer to the comments provided within the code snippet.

.logo {
  cursor: pointer;
  /*  UPDATED */
  /* margin-right: auto; */
  margin-left: 1.5rem;
  height: 3rem;
  width: auto;
}

.title {
  text-transform: capitalize;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto;
}

header {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 4rem;
  display: flex;
  /*  UPDATED */
  /* justify-content: flex-end;  */
  align-items: center;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0 1.5rem 0 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1.2rem;
}
<header>
  <img class="logo" src="./Images/ic-logo.svg" alt="logo">
  <div class="title">
    <span class="title1">COLMAR</span>
    <span class="title2">ACADEMY</span>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

Answer №2

If you're feeling a bit lost here, visual aids can really come in handy. But fear not, I have two solutions to offer that might just do the trick.

  1. Utilize flex-boxes:

Create a flex box layout for your logo like this:

 <div style="display: flex; flex-direction: row;">
      <img class="logo" src="./Images/ic-logo.svg"alt="logo">
      <div class="title">
           <span class="title1">COLMAR</span>
           <span class="title2">ACADEMY</span>
      </div>
 </div>

Apply the same method to your navigation bar as well :)

  1. Simply remove the margin-right from the logo and it should display correctly in the browser.

Answer №3

To achieve the desired outcome as per your HTML structure, utilize the following CSS code without any unnecessary styling to precisely fulfill your request.

header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  flex-shrink: 1;
  margin-right: 8px;
}

.title {
  flex-grow: 1;
}

.nav_links {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.nav_links li {
  margin-left: 8px;
}
<header>
  <img class="logo" src="./Images/ic-logo.svg" alt="logo">
  <div class="title">
    <span class="title1">COLMAR</span>
    <span class="title2">ACADEMY</span>
  </div>
  <nav>
    <ul class="nav_links">
      <li><a href="#">On Campus</a></li>
      <li><a href="#">Online</a></li>
      <li><a href="#">For companies</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>

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

Experience the Firefox nightmare with a fixed background-attachment!

I've been struggling with a puzzling issue all day, and I'm hoping that someone with more expertise can help me solve it. As I work on updating the design of my website, I've encountered what seems to be a bug specific to Firefox. I've ...

htmlcssfirefox

Save the current state of the collapsible navigation menu

I developed a website for a friend, but I'm encountering an issue with my js/css vertical and collapsible menu. Every time I click a link, the new page loads and the entire menu collapses again. I've tried to figure out a way to "store" the infor ...

javascriptphpjqueryhtmlcss

Increasing the size of a div container based on the position of the cursor on the

I recently stumbled upon a fantastic website where two images slide left and right based on mouse movement. When the cursor is on the right, the right part of the image expands, and when it's on the left, the left part expands. You can check out the ...

javascriptjqueryhtmlcss

Ways to prevent images from vanishing when the mouse is swiftly glided over them

Within the code snippet, the icons are represented as images that tend to disappear when the mouse is swiftly moved over them. This issue arises due to the inclusion of a transition property that reduces the brightness of the image on hover. However, when ...

javascriptjquerycsshtml

The fluid table within the Bootstrap container is not adapting to different screen

Can't figure out why the bootstrap container fluid table is not responsive. Even though I used an example of My First Bootstrap Page that works fine and is responsive, this particular table remains unresponsive. I want to avoid using a scroll but will ...

phphtmlcssbootstrap-4

How to achieve smooth transitions in CSS3 with dynamic height changes?

Currently, I am in the process of designing a unique layout. The main challenge lies in toggling between two classes for a div element, one of which has a height of 0px. To achieve this, I have successfully utilized CSS3 animations that effectively scale t ...

jqueryhtmlcss

Modify the href attribute of an anchor tag that does not have a specified class or

I am currently using an event plugin that automatically links all schedule text to the main event page through anchor tags, like this: <td><a href="http://apavtcongresso.staging.wpengine.com/event/congresso-apavt-2018/">Chegada dos primeiros c ...

javascriptjqueryhtmlcss

Unexpected outcomes occur from CSS nesting

Today I realized there is still so much to learn about CSS. How is it possible that the CSS style below produces that outcome? Stylesheet: li.item a:first-child {color: red} HTML List: <ul class="mylist"> <li class="item"><a ...

cssnested

How to traverse up to the parent element using XPath in nightwatch

Here is the structure I am dealing with: <div class="class"> <h4 class="class2"> "Condition" </h4> <div class = "click_class">Click_text </div> </div> I need to click on the element with class ="click ...

cssxpathautomated-testsnightwatch.js

Exploring Laravel 4's CSS Routing

Attempting to connect my CSS document in Laravel 4 has been a bit challenging. The location of my CSS file is: public/css/style.css In the view, I have the following link: <link type="text/css" rel="stylesheet" href="{{URL::asset('css/style.css ...

cssexceptionrouteslaravel

jQuery function to automatically close any other opened divs when a new div is opened

I have multiple elements that reveal a div when clicked. The issue is that if all elements are clicked, all divs open instead of just the one that was clicked. This is my jQuery code: <script> $(document).ready(function() { $('.servicemark ...

javascriptjqueryhtmlcss

Creating a torn paper illusion using CSS masking techniques

My goal is to create a ripped/lined paper effect using CSS mask. It's working well and looks good. However, I'm struggling to apply the mask at the top as well. Here's what I've tried so far: mask-image: linear-gradient(white, white), u ...

csscss-mask

As I scroll down, my content hovers over my navbar

My website loads with everything in the right place, but as soon as I start scrolling, the content moves onto the navbar and hides at the top of the screen. I want the navbar to remain at the top of the screen at all times and have the content hidden under ...

htmlcssscrollnavbarbootstrap-5

`Customizing Switch Colors on Bootstrap: A Guide`

https://i.sstatic.net/alsdy.png I obtained the code from Get Bootstrap. <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> & ...

htmlcssbootstrap-4bootstrap-5

Verify if a personalized angular directive is able to display or conceal an element

I have a custom directive that toggles the visibility of an element based on the value of another service. I attempted to write a test to verify if the directive functions as intended. Initially, I used the ":visible" selector in my test, but it consistent ...

javascriptjqueryhtmlcssangularjs

Issue encountered when concealing page elements followed by revealing them again

My goal is to conceal an id within a page and then reveal it once all the JavaScript has finished loading on the page. The JavaScript I am using to display the content again is: $(document).ready(function() { $("#HomePage")[0].style.visibility = "visib ...

javascriptjqueryhtmlcss

What is the best method to modify the hover text color in a Bootstrap navbar?

Whenever the cursor hovers over the letters, I attempted to modify their color, but unfortunately, it didn't work as expected. nav a { text-decoration: none; } .logo { height: 3rem; } .navbar-nav .nav-item .nav-link.custom:hover { color: ...

csstwitter-bootstrapbootstrap-5

Obtain several dropdown menus without their items displaying beneath the correct element

I'm currently in the process of setting up multiple drop down menus within a navigation element. The issue I'm facing is that when a user hovers over the menu items, the displayed elements appear below the first item instead of the selected one. ...

htmlcssdrop-down-menu

What is the best method for resetting a flexbox item?

I'm trying to achieve a layout with flex box where the first item spans 100% width, the second item is centered at 50% on its own line, and the third and fourth items each take up 50% width on the same line. Usually, clearing works fine on simple blo ...

htmlcssflexbox

Searching for li elements that contain text values - a guide

I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox. Here is the design: Search List: <input type="text" id="txtSearch" /> <ul> <li>Coffee1</li> <li>Coffe ...

javascriptjquerycss