1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

DIV Top Nav Bar Issues

Discussion in 'HTML & Website Design' started by pirate_tat87, Mar 13, 2023.

0
  1. #1
    Okay so I am running into a bit of an issue with a navigation bar I am attempting to use.

    This is what I want the end result to look like you can see the navigation bar is flush to the top of the browser window and stretches full length side by side. This is active in my about me page, in my testimonials page its not stretching across the screen like the about me page and on my main homepage it shows there is a bit of a border around the navigation bar

    https://imgur.com/a/EBtCJb0

    All 3 images are in the link above

    https://codepen.io/Pirate_tat87/pen/yLxvKmV?editors=1100

    I have been using codepen to test the information. also a big issue that I have been running into if anyone can be kind enough to teach me on it. any time I add any new CSS to my style.css page i can't get it to distinguish the coding different from all the other CSS that I do even though i name it with an ID or Class
     
    Solved! View solution.
    pirate_tat87, Mar 13, 2023 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    hi,
    I'm not used to debug a codepen. Could I see your original website, instead?
     
    hdewantara, Mar 13, 2023 IP
  3. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #3
    @hdewantara - My website is https://piratesdmcaservice.com
     
    pirate_tat87, Mar 13, 2023 IP
  4. #4
    thx.
    Well, div.topnav inside testimonial page differs from the one in about page. It has additional (inline) style:
    position:absolute;
    Code (CSS):
    which prevents it from stretching to full width.

    If it were to be removed then layout may look broken? Hmm, I guess the easiest way to make it full width is perhaps by adding another style rule 
    width:100%;
    Code (CSS):
     
    hdewantara, Mar 13, 2023 IP
  5. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #5
    With me removing the code

    position: absolute;
    left: 0px;
     top: 0px;
    width: 100px;
    Code (CSS):


    This is now how it is now displayed.
    image_2023-03-13_052912067.png
     
    pirate_tat87, Mar 13, 2023 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    Yes I think you also need to remove the 
    display:flex;
    Code (CSS):
    line from <body>.
    You'll find this inside /Testimonial/style.css line 12
     
    hdewantara, Mar 13, 2023 IP
  7. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #7
    That made no change.
     
    pirate_tat87, Mar 13, 2023 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #8
    Try to press CTRL-F5 (force reload) your browser, perhaps?
     
    hdewantara, Mar 13, 2023 IP
  9. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #9
    are you sure? the changes you made doesn't seem to be reflected on testimonials
     
    hdewantara, Mar 13, 2023 IP
  10. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #10
    It has to be the style.css inside /Testimonial directory
     
    hdewantara, Mar 13, 2023 IP
  11. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #11
    Okay so here is the full code

    You can see when you run it the issue that i'm running into
    image_2023-03-13_063723302.png 
    
<html>
    <head>


        <!-- Swiper CSS -->
        <link rel="stylesheet" href="css/swiper-bundle.min.css">

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                                    
    </head>
    <body>
<div class="topnav">
  <a href="#home">Home</a>
  <a href="#contact">Contact</a>
  <a href="https://piratesdmcaservice.com/ContactMe/Index.html">About</a>
  <a class="active" href="Testimonial/index.html">Testimonials</a> 
</div>     
        <div class="slide-container swiper">
            <div class="slide-content">
                <div class="card-wrapper swiper-wrapper">
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <img src="images/profile1.jpg" alt="" class="card-img">
                            </div>
                        </div>

                        <div class="card-content">
                            <h2 class="name">David Dell</h2>
                            <p class="description">The lorem text the section that contains header with having open functionality. Lorem dolor sit amet consectetur adipisicing elit.</p>

                            <button class="button">View More</button>
                        </div>
                    </div>
                    <div class="card swiper-slide">
                        <div class="image-content">
                            <span class="overlay"></span>

                            <div class="card-image">
                                <img src="images/profile2.jpg" alt="" class="card-img">
                            </div>
                        </div>

                       
                </div>
            </div>

            <div class="swiper-button-next swiper-navBtn"></div>
            <div class="swiper-button-prev swiper-navBtn"></div>
            <div class="swiper-pagination"></div>
        </div>
       
    </body>

    <!-- Swiper JS -->
   

    <!-- JavaScript -->
    <script src="js/script.js"></script>
</html>
    HTML:
    /* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EFEFEF;
}
.slide-container{
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-content{
  margin: 0 40px;
  overflow: hidden;
  border-radius: 25px;
}
.card{
  border-radius: 25px;
  background-color: #FFF;
}
.image-content,
.card-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
}
.image-content{
  position: relative;
  row-gap: 5px;
  padding: 25px 0;
}
.overlay{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #4070F4;
  border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  background-color: #4070F4;
}
.overlay::after{
  border-radius: 0 25px 0 0;
  background-color: #FFF;
}
.card-image{
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #FFF;
  padding: 3px;
}
.card-image .card-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #4070F4;
}
.name{
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.description{
  font-size: 14px;
  color: #707070;
  text-align: center;
}
.button{
  border: none;
  font-size: 16px;
  color: #FFF;
  padding: 8px 16px;
  background-color: #4070F4;
  border-radius: 6px;
  margin: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button:hover{
  background: #265DF2;
}

.swiper-navBtn{
  color: #6E93f7;
  transition: color 0.3s ease;
}
.swiper-navBtn:hover{
  color: #4070F4;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 35px;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color: #6E93f7;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: #4070F4;
}

@media screen and (max-width: 768px) {
  .slide-content{
    margin: 0 10px;
  }
  .swiper-navBtn{
    display: none;
  }
}
/* Add a black background color to the top navigation */
.topnav {
  background-color: #878787;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.active {
  background-color: #04AA6D;
  color: white;
}
    Code (CSS):
     
    pirate_tat87, Mar 13, 2023 IP
  12. pirate_tat87

    pirate_tat87 Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    3
    #12
    Update, I was able to get it resolved it did have to do with the display:flex but also something else, I dont' remember sorry. but now my next issue is I would like to get the box back in the center of the page like it should be without messing up the nav bar at the top

    This is how it currently looks, any ideas

    image_2023-03-13_065417792.png
     
    pirate_tat87, Mar 13, 2023 IP