logo
Home JAVASCRIPTJAVACHASHPYTHONPHPCPPIOSSQLHTML
down
shadow

I am trying to evenly space the links across my navigation bar


I am trying to evenly space the links across my navigation bar

Content Index :
I wish this help you I am trying to evenly space the links to my website across my navigation bar. I'm having trouble with the last link because it is a dropdown, separate from my other links. I was able to evenly separate my non-dropdown links across the navigation bar by adding width: 25% to.navbar a in my CSS stylesheet. I tried adding width: 25% to .dropdown by that didn't do it. I also tried adding it to .dropdown .dropbtn but that didn't do either. , I have done some changes according to your requirement, please check.
/* Navbar container */
*{
  box-sizing: border-box;
}
 .navbar {
    overflow: hidden;
    background-color: #272424;
    font-family: Arial;
  }

  /* Links inside the navbar */
  .navbar a {
    float: left;
    font: Arial;
    font-size: 20px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 25%;
  }

  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
    width: 25%;
  }

  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    width: 100%;
  }

  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #81A3A7;
  }

  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  /* Links inside the dropdown */
  .navbar .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    width:auto;
  }

  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }

  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Name</title>
    <link rel="stylesheet" href="index.css">
</head>

    <body>      
        <div class="navbar">
            <nav>
                <a href=index.html>About</a>
                <a href=projects.html>Projects</a>
                <a href=publications.html>Publications</a>
                <div class="dropdown">
                    <button class="dropbtn">Writing
                    </button>
                    <div class="dropdown-content">
                      <a href="why_writing.html">Why Write?</a>
                      <a href="dollops.html">Dollops</a>
                      <a href="longforms.html">Longforms</a>
                      <a href="technical_science.html">Technical/Science</a>
                      <a href="quotes.html">Quotes</a>
                      <a href="words.html">Words</a>
                      <a href="notes.html">Notes</a>
                    </div>
                </div>  
            </nav>
        </div>
        <header>
            <h1>Why Write?</h1>
        </header>
        <p>Coming soon!</p>
    </body>
</html>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Tags :

I am trying to evenly space the links across my navigation bar , Evenly space out links and centered logo in navigation bar , Trying to evenly space out an image nav link with the rest of the text links in navigation , Evenly space out horz links and bullets between links across nav bar , how to evenly spac ,
Tag : html , By : vferman
Date : March 29 2020, 07:55 AM
wish helps you Working demo: http://jsfiddle.net/8jK7N/1/
IE, however, doesn't support styling of the new HTML5 elements. You can use shiv to solve this issue. Working demo (with shiv): http://jsfiddle.net/8jK7N/2/
Tag : html , By : PsyberMonkey
Date : March 29 2020, 07:55 AM
hope this fix your issue Use display: table for UL and display: table-cell for LI. And display-table.htc for IE6/7 if they matter.
Tag : html , By : user96271
Date : March 29 2020, 07:55 AM
With these it helps Let's clean up some of that HTML and CSS :)
We can create the bullets using just the li parents for each link. The padding on #container li will space out the bullets evenly, however large of a gap you want.
<div id="container">
    <ul>
        <li>
            <a href="%3C%=BaseURL%%3E/entertainment">ARTS &amp; ENTERTAINMENT</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/technology">TECHNOLOGY</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/auto">AUTO</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/sports">SPORTS</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/news/more-news-briefs.asp">NEWS BRIEFS</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/greentech">GREEN ECONOMY</a>
        </li>
        <li>
            <a href="http://www.hirediversity.com" rel="nofollow" target="_blank">CAREER NEWS</a>
        </li>
    </ul>
</div>

* {
    margin: 0;
    padding: 0;
}
#container {
    overflow: hidden;
}
#container ul {
    margin: 10px auto;
    width: 776px;
    border-bottom: dotted 1px #CCC;
    overflow: auto;
    padding: 0 0 10px;
}
#container li:first-child {
    list-style: none;
    margin: 0 0 0 18px;
}
#container li {
    float: left;
    font-family:"Arial Narrow", Arial, sans-serif;
    font-size: 0.8em;
    padding: 0 30px 0 2px;
}
#container a:link {
    color: #000;
    text-decoration: none;
}
#container a:hover {
    color: #F00;
    text-decoration: underline;
}
Tag : html , By : Stephen
Date : March 29 2020, 07:55 AM
To fix this issue I'm attempting to evenly space out links in a nav bar to the left and right of a centered logo, similar to this (link). , Encase each navBar section (including the image) in it's own div.
<div class="navSection>Section 1</div>
<div class="navSection>Section 2</div>
<div class="navSection>Image</div>
<div class="navSection>Section 4</div>
<div class="navSection>Section 5</div>

.navSection {
    float: left;
    width: 20%;
}

Trying to evenly space out an image nav link with the rest of the text links in navigation

Tag : html , By : Cube_Zombie
Date : March 29 2020, 07:55 AM
Hope that helps I'm trying to make my first website after reading an html/css book. I'm having difficulty evenly spacing out my navigation. 
.nav {
    background: tomato;
    padding: 25px;
    display: flex;
    list-style: none;
    flex-direction: row;
    /* vertical alignement */
    align-items: center;
    /* how you want horizontal distribution */
    /* space-evenly | space-around | space-between */
    justify-content: space-evenly;
}

.item {
    background: rgba(0, 0, 0, 0.2);
}

.item:first-child {
    height: 50px;
    line-height: 50px;
}
<ul class="nav">
    <li class="item">navA</li>
    <li class="item">navB</li>
    <li class="item">my third item</li>
    <li class="item">Blah</li>
    <li class="item">Contact</li>
</ul>
nav > ul {
    background: tomato;
    padding: 25px;
    display: flex;
    list-style: none;
    flex-direction: row;
    /* vertical alignement */
    align-items: center;
    /* how you want horizontal distribution */
    /* space-evenly | space-around | space-between */
    justify-content: space-evenly;
}
Related Posts Related QUESTIONS :
  • How to select specific tag's attribute value with xPath?
  • How to make div rows fill available height
  • How to fix text inside a block that grows
  • svg hexagon halftone pattern
  • How to edit a website's element's background colors using a chromium extention
  • What is the main tag in HTML5 ? How does it differ from body tag?
  • My image is flowing out from my div column. How I can fix it and made the image full-size into div
  • How to draw line in react
  • Why Transition css is not working in child selector css
  • How to modify materialize css select option?
  • How to center some text in a rectangle in CSS?
  • How do I equally space out css grid columns?
  • How to make sure all the parts of a macro are running correctly?
  • How to adjust the zoom of website at different browser at different screen size?
  • Can't set max height on child div properly
  • Why background color is not applying to DIV container?
  • Need to select the first-child
  • No space between attributes in buttons
  • How can I block google from crawling my page, but still let Baidu do it?
  • Rendering html content in matToolTip (Angular)
  • Embedding an iframe when iframe height is variable
  • How to use 'word-break: break-word' with link inside of text?
  • How I can animate circular progress bar from left to right?
  • Angular 6 - How can I hide a div onclick of outside of that div
  • How to fill an inline-block div with a solid color?
  • Form file doesn't align with rest of form
  • How to trim off left and right sides of image evenly as I reduce my screen size? (@media query)
  • How can I password protect a section of a static website?
  • Move a div up when I hover over it
  • Why is "align" not a valid attribute of div but still works?
  • Behavior with height/minHeight and display:flex
  • How can i change my h2 title to <p> text while keeping size and alignment?
  • Hover on the text to change size using CSS
  • How to keep a grid of cols without breaking on a new row?
  • Why is bottom: 0 not enough to move ::after content directly below main content?
  • Why does a React build need to be served? Why can't I just open it in the browser?
  • What is the proper way to target the tab key 'highlight' events on an html element?
  • How to Implement dot and line below the text in CSS?
  • DIVs not properly aligned
  • HTML 'for' tag not working for <p> but works on <label>
  • <p> element does not appear to be within parent <footer> element
  • Why flex container is smaller than its content
  • Center an image and a text in a div
  • .class with display: none -> .class:focus with display: block; causes links to not work
  • Best way to use a right pointing arrow in CSS animation
  • Angular 7 : Select tag doesn't display options
  • Orientation: Landscape showing true for desktop
  • How to adjust text in a table
  • React Button Click Event Not Firing - One Button Works, One Button Doesnt
  • Angular Material: using mat-sidenav, cannot read property 'toggle' of undefined
  • Share image whatsapp not visible
  • Why does ImageResizer increase the loading time?
  • Can someone help figure out whats wrong with my answer on testdome?
  • Safari Viewport Bug, Issues with Fixed Position and Bottom or Top
  • Why does SVG produce blurry image in Firefox for large ViewBox dimensions
  • Do `overflow-wrap: break-word` and `word-break: break-word` ever behave differently?
  • Visual Studio Code: How to remove html tags and write to multiple lines at the same time?
  • How to make a row of images a vertically and horizontally centered div?
  • How to use specificity with css?
  • can't assign two style in different tag
    		•
    shadow
    Privacy Policy - Terms - Contact Us © scrbit.com