CODEWITHSUNDEEP
htmlcssnavbar
Kincsem
Kincsem

Reputation: 137

Navbar text extends outside of the space

I'm not fluent in the front end enough to know how to address this issue, the problem is on narrow screens the navbar does not adjust so that all the text remains inside.

For wide screen monitors, its fine, along with mobile screens, however with an iPad in portrait view the last section in the navbar extends outside of the space.

How can I fix this so all the sections stay inside the navbar?

See below—

Narrow screens (iPad portrait view) enter image description here

Intended view: enter image description here

Here is the CSS that's being used:

style.css

#primary-menu {
background: #dbdddd;
height: 33px;
font-family: 'francois one', 'arial narrow', 'arial', sans-serif;
/*font-family: 'Oswald', sans-serif;*/
font-size: 1.8em;
position: relative;
width: 100%;
z-index: 5;
}
#primary-menu ul {
margin: 0 20px 0 10px;
padding: 0;
list-style: none;
}
#primary-menu ul li {
display: inline-block;
text-transform: uppercase;
position: relative;
}
#primary-menu ul li a {
display: block;
padding: 5px 10px;
line-height: 23px;
text-decoration: none;
color: #0d234d;
}
#primary-menu ul li a:hover {
background: #e6e7e8;
}
#primary-menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 180px;
background: #dbdddd;
}
#primary-menu ul li:hover ul {
display: block;
z-index: 10;
}
#primary-menu ul ul li {
display: block;
}

responsive-nav.css

.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}

.nav-collapse li {
/*width: 100%;*/
display: block;
}

.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}

.nav-collapse.opened {
max-height: 9999px;
}

@media screen and (max-width: 40em) {
#primary-menu {
    min-height: 33px;
    height: auto;
}
.nav-collapse li {
    width: 100%;
}
}

HTML

<div id="primary-menu" class="menu-primary-container">
            <ul id="menu-primary" class="nav-menu">
                <li id="" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3045">
                    <a href="">Home</a></li>
                <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3047">
                    <a href="">Fight Schedule</a></li>
                {#<li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3047">#}
                    {#<a href="">Articles</a></li>#}
                <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3048">
                    <a href="">Boxing Predictions</a></li>
                <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3049">
                    <a href="">Boxing Score Analysis</a></li>
                <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3049">
                    <a href="">KTFO Videos</a></li>
            </ul>
</div><!-- end Menu bar -->

Upvotes: 0

Views: 788

Answers (3)

xengravity
xengravity

Reputation: 3589

The issue is that the width of the combined navigation elements are wider than the screen. There are a few factors contributing to this: font size, margins, and padding.

Since there are no rules specifically set to tell the browser what to do, room is made by putting the link that doesn't fit onto a new line.

You have several options to fix this.

  1. You can reduce the padding set on your anchor tags. You currently have 10px on each side which equals 20px total for each anchor tag. #primary-menu ul li a {5px 5px}

  2. You can reduce the font size so that the width of each anchor tag is lessened.#primary-menu {font-size:1.6em}

  3. You can reduce the margin on your unordered list so that the anchor tags have more room. #primary-menu ul {margin:0}

  4. You can do a combination of all of the above.

Upvotes: 2

German Cabarcas
German Cabarcas

Reputation: 21

The problem comes from the field padding defined for the anchors contained in your navigation try decreasing it like this in your media query, also the breakpoint should be defined in pixels:

#primary-menu ul li a {
display: block;
padding: 5px 5px;
line-height: 23px;
text-decoration: none;
color: #0d234d;
}

Upvotes: 1

Nermin Sehic
Nermin Sehic

Reputation: 612

You should increase the size of your breakpoint in the responsive-nav.css. Also, em units should not be used in responsive design for breakpoints because its more natural to use pixels since your resolution is in pixels. You should use max-width: 960px for example and set font to 2em to scale it properly, because em unites are relative to the size of the element.

Upvotes: 1

Related Questions