Question 43653 in Html Question posted in
Some basic documentation can be found here.

my fixed navbar width large than the screan width – Html

I work in fixed nav bar width changing it’s width to 100% on small-devices but the navbar going over the screen width.
as you see there on the image bellow:
enter image description here

the navbar css class

  • parent base nav have display: block and position default

  • the nav its’s self position is fixed

  • the tabs display fixed with warp;

css:

.edit-nav, .upgrade-nav {
border-radius: 15px;
width: 500px;
height: 52px;
position: fixed;
z-index: 1200;
}
.nav-tab-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
           
@media (max-width: 767px){
    .edit-nav {
         border-radius: 0;
         width: 100%;
         height: auto;
         text-align: center;
    }
    .nav-Section {
        display: block;
        height: 160px;
    }
    .account-nav {
        position: relative;
        right: 0;
    }
}

html code:

<div class="edit-nav bg-white shadow-sm p-2    ">
            <nav class="bg-white d-block d-md-none pb-2">
                <div class="d-flex justify-content-between">
                    <span class="logo border rounded-pill">
                        <img src="../image/Logo.png">
                        <label class="hisstag">HISSTAG</label>
                    </span>
                    <span class="account-nav">
                        <img class="account-img border" src="../image/Logo.png">
                    </span>

                </div>
            </nav>
            <!-- start tabs section -->
            <nav class="nav-tab-flex">
                <span class="logo m-2 d-none d-md-block">
                    <img src="../image/Logo.png">
                </span>
                <a href="../En/EditProfile-en.aspx" class="bg-tab Profile">
                    <img src="../image/EditProfile.png">
                    Profile</a>
                <a href="../En/SocialMedia.aspx" class="bg-tab SocialMedia">
                    <img src="../image/EditSocial.png">
                    SocialMedia
                </a>
                <a href="../En/Link.aspx" class="bg-tab Link">
                    <img src="../image/EditLink.png">
                    Link
                </a>
                <a href="../En/Theme.aspx" class="bg-tab Theme">
                    <img src="../image/EditTheme.png">
                    Theme 
                </a>
            </nav>
      <!-- end tabs section -->
        </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the issue on the .row class in bootstrap add more margin which cuase the issue, so I set the margin right = 0;

    enter image description here


  2. 0

    It’s hard to tell with this amount of code but it could be that the elements in the div were told a width that is larger than the screen width causing it to spill over. Try removing widths from elements in the div and see if that helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search