Grid columns not align and text-tranform will not work for links within navigation bar

bootstrap
center navigation bar css w3schools
navigation bar center align css
flexbox
responsive navigation with centered logo
how to center navigation bar css
responsive centered navigation bar
center text in navbar bootstrap

I created an inline grid layout for a navigation bar consisting of two columns: logo and nav links. The links are still not inline with the logo. Also, I'm trying to text-transform the link text to be capitalized, but not getting desired result.

Tried modifying the grid and used different padding, but doesn't seem to the correct approach.

body {
  font-family: 'Robo', sans-serif;
}

.navbar {
  display: inline-grid;
  grid-template: auto auto;
  grid-column-gap: 680px;
  text-decoration: none;
  border-bottom: 1px solid rgb(196, 196, 196);
  background-color: #F7F9F9;
  padding: 10px;
  width: 100%;
}

.logo {
  grid-column: 1/2;
}

.links {
  grid-column: 2/2;
}

.logo h1 {
  font-size: 32px;
  font-weight: 340;
}

.links a {
  text-transform: capitalize;
  text-decoration: none;
  font-size: 20px;
  padding-left: 40px;
}
<nav>
  <div class="navbar">
    <div class="logo">
      <h1>Rick Wilson</h1>
    </div>
    <div class="links">
      <a href="#">Experience</a>
      <a href="#">Projects</a>
      <a href="#">Technology Stack</a>
      <a href="#">Contact</a>
    </div>
  </div>
</nav>

Also, I'm trying to text-transform the link text to be capitalized, but not getting desired result.

What is the desired result? Do you maybe want uppercase?

Made some adjustments to your grid layout, is this what you need?

body {
  font-family: "Robo", sans-serif;
  margin: 0;
}

.navbar {
  display: grid;
  grid-template-columns: auto 1fr;
  border-bottom: 1px solid rgb(196, 196, 196);
  background-color: #f7f9f9;
  padding: 20px;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: 300;
}

.links {
  text-align: right;
}

.links a {
  text-transform: capitalize;
  text-decoration: none;
  font-size: 16px;
  margin-left: 20px;
}
<div class="navbar">
  <h1 class="logo">Rick Wilson</h1>
  <div class="links">
    <a href="#">Experience</a>
    <a href="#">Projects</a>
    <a href="#">Technology Stack</a>
    <a href="#">Contact</a>
  </div>
</div>

CSS-GRID Problems aligning content in navbar, 1) Set the grid container properties on the top-nav div .top-nav{ display: grid; grid- template-columns: 1fr 2fr 1fr; grid-template-rows: auto;� I have a grid in my WPF application. This grid has two columns and one row. Now, I am trying to align the first column content to the right and second column content to the left as below: -------

I added display: flex and align-items: center to .links

    body {
      font-family: 'Robo', sans-serif;
    }

    .navbar{
      display:inline-grid;
      grid-template: auto auto;
      grid-column-gap: 680px;
      text-decoration: none;
      border-bottom: 1px solid rgb(196, 196, 196);
      background-color:#F7F9F9;
      padding:10px;
      width: 100%;
    }


    .logo {
      grid-column: 1/2;
    }

    .links {
      grid-column: 2/2;
      display: flex;
      align-items: center;
      
    }

    .logo h1 {
      font-size:32px;
      font-weight: 340;
    }

    .links a {
      text-transform: capitalize;
      text-decoration: none;
      font-size:20px;
      padding-left: 40px;

    }
    <header>
                <nav>
                  <div class = "navbar">
                    <div class = "logo"><h1>Rick Wilson</h1></div>
                    <div class = "links">
                    <a href="#">Experience</a>
                    <a href="#">Projects</a>
                    <a href="#">Technology Stack</a>
                    <a href="#">Contact</a>
                    </div>
                  </div> 
                </nav>
                  </header>

Principles of Web Design: The Web Warrior Series, May not be copied, scanned, or duplicated, in whole or in part. floats, 474–476 font families, 481 footers, 463–466 grouping columns, 466–467 127 technology issues, 111–112 tel input type, 498 testing web sites, 130–132 text 207 underlining, 212–213 vertical alignment, 207–208 vertical navigation bars, 440 white� Just upgraded to 3.1, I'm using a grid with fixed columns for 1-3, the other columns has a different height then the fixed. I did not set heights on the columns. If I reset a column width or page next/previous, the refresh fixes the height. I'm trying to figure out how to upload a screenshot, can you help me with that?

add

display:flex align-items: center justify-content: space-between

to .navbar so that both of the flex children .links and .logo will be centered horizontally. Then the justify-content: space-between should push each item out to the left and right sides with space in between them.

How To Create Centered Menu Links, Learn how to create a navigation bar with a centered link/logo. Left-aligned links (default) --> text-decoration: none; Responsive navigation menu - display links on top of each other instead of next to each other (for mobile transform: none; Examples might be simplified to improve reading and basic understanding. With CSS grid layout, the grid itself within its container as well as grid items can be positioned with the following 6 properties: justify-items, align-items, justify-content, align-content, justify-self and align-self.

CSS � Bootstrap, The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content. Grid columns are� Note that this code does right align on all columns starting on the letter 'H'. Replace the "contains" with a comparison to the name of the column if you just want to align one column. Hi Jens, Thank you it works. one more question, If you wont mind. Im using GridUtil add-on to add buttons with Grid. How to do I align it to MIDDLE.Center?

Where Lines Break is Complicated. Here's all the Related CSS and , Say you have a really long word within some text inside an element that isn't wide The text hanging out of the box is a visual problem. CSS Grid Layout implements the specification Box Alignment Level 3 which is the same standard flexbox uses for aligning items in its flex container. This specification details how alignment should work in all the different layout methods.

Foundations of Microsoft Expression Web: The Basics and Beyond, Open With dialog box, 53 Opera, 32 Optimize HTML dialog box options not 43 changing in Design view, 165 padding attribute, 123 Page Editor Options, 40, 74, 58 Picture tab, 56 Ruler and Grid tab, 56 page layout adding a two-column 226 creating a centered, fixed-width layout, 204 creating a hyperlink to a new� 2 Column Layout 3 Column Layout 4 Column Layout Expanding Grid List Grid View Mixed Column /* Style the links inside the navigation bar */ text-align: center;

Comments
  • why the Huge column gap?
  • I wanted two columns for the grid and wanted them to appear on each side of the page. I'm sure there is a better technique here, but I didn't know of any off hand.
  • yes but why a big gap? ... if you remove it you almost good
  • When I remove the gap, the links almost look centered which is not what I'm going for.
  • The text-transform seems to be working fine. Did you mean text-transform: uppercase?