4

Update: the page URL is https://nuclearterrortoday.org/test/pledge.php - if you inspect on mobile, you'll notice the navbar doesn't take the full width of the page, though inspector says the width is 100vw

Stylesheets (in cascading order - some elements may be overridden in forms.css):

https://nuclearterrortoday.org/test/style.css

https://nuclearterrortoday.org/test/forms.css

I have a website with a nav bar that's standard across the site. On one page, the nav bar only covers approximately 90% of the width of the screen, leaving a gap on the right side. There's an additional stylesheet styling the affected page, but nothing affecting any nav elements or the page itself (ie changing the body's width). Resetting HTML, body, topnav, and .pledge-bg (custom body class) has no effect.

That said when using js to change the display of a child element of .topnav for the mobile menu, the width of .topnav changes to the width of the screen as intended.

On every other page, .topnav takes 100% of the screen width. The HTML structure where the header is included is identical.

CSS:

/*left:0 and right: 0 per @Magnus Eriksson*/


var myLinks = document.getElementById("myLinks");
if (myLinks.style.display !== "block") {
  myLinks.style.display = "block";
} else if (myLinks.style.display == "block") {
  myLinks.style.display = "none";
}
html {
  left: 0;
  right: 0;
  width: 100%;
  width: 100vw;
}

body {
  left: 0;
  right: 0;
  width: 100%;
  width: 100vw;
}

.topnav {
  left: 0;
  right: 0;
  position: fixed;
  top: 0;
  width: 100%;
  width: 100vw;
  height: 10%;
  height: 10vh;
  background-color: rgba(169, 169, 169, 0.75);
  color: white;
  font-size: 5rem;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
}

#topnav {
  left: 0;
  right: 0;
  width: 100%;
  width: 100vw;
}

.topnav #myLinks {
  left: 0;
  right: 0;
  z-index: 999;
  display: none;
  height: 100%;
  height: 100vh;
  width: 100%;
  width: 100vw;
  z-index: 11;
  background-color: rgba(148, 181, 201, 0.9);
  color: white;
}

.pledge-bg {
  left: 0;
  right: 0;
  background: url(img/ocean-nuke.jpg) no-repeat center center fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  width: 100vw;
}
<script src="https://nuclearterrortoday.org/test/swap.js"></script>

<body>
  <!-- <?php include "../../inc/header.php" ?>

-->

  <!-- Top Navigation Menu (header.php:)-->
  <div class="topnav" id="topnav">
    <div id="myLinks">
      menu
    </div>
  </div>
  <div class="main">
    <div class="main-header">
      <h1 id="vision">Miracles Have Been Created in The Past</h1>
      <p id="main1">10/10/1963 - We no longer test nukes in the ocean or atmosphere!</p>
      <img onclick="animateSlide('left')" class="control" id="lControl" src="img/leftArrow.png">
      <img onclick="animateSlide('right') " class="control" id="rControl" src="img/rightArrow.png">
    </div>
  </div>
</body>
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
froggomad
  • 1,747
  • 2
  • 17
  • 40
  • 3
    Try and set `left: 0;` and `right: 0;` instead of `width` and see if that changes anything. – M. Eriksson Nov 28 '18 at 21:46
  • simply remove the width:100vw it also include the scrollbar width thus the issue – Temani Afif Dec 12 '18 at 12:04
  • 1
    Your HTML indicates that you have wrapped `.topnav` inside ` – elbrant Dec 12 '18 at 14:25
  • 1
    aside isn't styled in this case - I'm just using it as a way to separate code. That said, I removed it as it doesn't help anyone answer this question. Also, there's a lot of CSS that isn't included that could potentially be influencing something on the page, but not knowing what it is, I don't want to flood this post with 1,000ish lines - I'm including links to the stylesheets as well – froggomad Dec 12 '18 at 18:22
  • I'm assumimg you have fixed the issue, I have been unable to replicate what you're describing on my Mac using Google Chrome. I have viewed the website you linked and the issue does not seem to be there anymore – A Friend Dec 13 '18 at 05:26
  • @AFriend - the issue isn't fixed - are you viewing the site on a mobile device or in inspector as a mobile device? If you're viewing as desktop or manually scaling the page, the issue isn't present – froggomad Dec 13 '18 at 23:57
  • please use 100% rather then 100vw in .topnav #myLinks and #topnav for mobile – Vishal Panara Dec 14 '18 at 04:56
  • @VishalPanara https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and – froggomad Dec 14 '18 at 05:28
  • if the issue isnt present in the chrome web inspector then its a mobile only issue, try using default css instead of fancy mobile specific stuff :) – Daan Dec 19 '18 at 07:47

7 Answers7

4

Instead of using width: 100vw on #topnav just use width: 100%. Also if you define two values for one property the last one will override the first one so don't do that.

Remove width: 100vw and width: 100% from .topnav as id topnav already got the precedence over class topnav so width applied on .topnav will never apply.

Also, remove all the styling from the body. left and right will not work on body tag as it's position is static. Also, body by default take 100% width you just need to remove default margin which browser applies on the body tag:

body {
    margin: 0;
}

Also, remove all the styling from HTML tag reason is same I mentioned for body tag above.

Milad
  • 719
  • 1
  • 10
  • 28
Aditi
  • 355
  • 2
  • 9
  • 100vw is a guaranteed way of getting full-width regardless of other page elements. 100% is a guaranteed way of getting 100% of the parent's width. As 100vw isn't supported, 100% is a fallback. As you mentioned, the 2nd value is the one used so browsers that support vw will use width: 100vw; and browsers that don't support vw will ignore it and use width: 100%; Also, your solution doesn't solve the issue (neither removing vw or adding margin: 0; to body or both) – froggomad Dec 13 '18 at 23:40
  • As 100vw isn't **fully** supported. https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and – froggomad Dec 14 '18 at 00:06
2

The right arrow for your image slideshow is causing the position of your nav menu to be thrown out. The right arrow is currently coded to display at -5% on an iphone screen) and it is the css includes position:absolute. There is currently no media query to handle resize for devices under iPad size, so on mobile phones, the main div, containing the slideshow + arrows, is impacting the nav menu; this is causing the a negative 'shift'.

The issue could most likely be resolved by moving the div containing the arrows further down on mobile devices using media queries.

Hope this helps

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
0

On the page with the navigation bar error where there is a big gap add some inline style with the <style> tag inside the 2 <head> tags and try margin-top: -150px;

If it works but not enough increase the negative amount of pixels.

Programming Things
  • 15
  • 7
0

Actually this problem is because of the element with the class .top-bar.

Since your .topnav is having 

.topnav {
    position: fixed;
  }

You need to give some position style to your .top-bar and that can be

.top-bar {
   position: fixed;
  }

OR

.top-bar {
   position: absolute;
  }

And then you can handle the display property for your text which I think is the Heading or Logo of the website.

Here is the screenshot of my modifications. screenshot with the required changes

I hope this will help you with your problem.

Lalit Kumar
  • 19
  • 1
  • 7
  • Thanks, but that's the javascript showing #myLinks which somehow corrects the problem. Try it with the nav menu not active – froggomad Dec 13 '18 at 00:26
0

To use width, you need to make the element block or inline-block For example:

.topnav {
display: inline-block !important;
left: 0;
right: 0;
position: fixed;
top: 0;
width: 100vw !important;
height: 10%;
height: 10vh;
background-color: rgba(169,169,169, 0.75);
color: white;
font-size: 5rem;
padding-bottom: 0;
margin-bottom: 0;
overflow: hidden;
}
user9985211
  • 228
  • 4
  • 14
0

You can fixed in two way first way is trick way and second way is right way. First way,

  • Remove width: 100vw; from #topnav and .topnav.

Second way,

  • Your navbar is fine and working correctly.But your some element's are wrong.When you use vw for width.You should careful.Your all elements total width must be maximum 100%.I mean total width is "width + left + right".You should check and recalculate for total width for every width.

Solution for second way::

    .main-header{
          min-width: 95%;
    }
    .form{
          width:95%;
    }
NayDwe
  • 649
  • 3
  • 11
-1

This is not enough information to debug this issue. The code you provided works fine in a Codepen (topnav is full width). There is some additional stylesheet or markup affecting your layout, and without that, this question cannot be answered.

The only thing I noticed is topnav does not have a left: 0; style, resulting in a small whitespace on the left side, but I am not sure if that is the issue you are referring to as it is much smaller than a 10% gap.

Skylar Brown
  • 3,234
  • 2
  • 14
  • 7
  • You're probably right. I didn't want to overload the question with unnecessary code. I'm working on a fiddle now. I should mention the gap is fully on the right side as well – froggomad Nov 28 '18 at 21:41
  • 6
    If your answer is "there's not enough information to answer the question" then it should probably be a comment. – miken32 Nov 28 '18 at 21:54
  • I created a fiddle including all of the html and css and the fiddle is fine. What would you do from there given that the same code displays full width across all other pages? – froggomad Nov 28 '18 at 21:58
  • @froggomad I would inspect the .topnav (or whichever element is the wrong size) in chrome devtools and see if any styles are being overridden (they would appear as crossed out. You can then see which stylesheet is overriding the style. Your code appears correct. Any element with a fixed position and 100vw width should be full-width unless it's styles are being overridden by another stylesheet. Image: https://i.imgur.com/lJdno9z.png – Skylar Brown Nov 28 '18 at 22:19