How to put a menu at the left side of a video background

Hello I use code from Codepen from the user casuru

I would like to change it by putting a nav menu on the left side with 25% with and with each

  • under another
  • until it is completely at the bottom.

    This is the CSS and HTML code

    .navigation{
    padding-top:30px;
    padding-bottom:30px;
    position:absolute;
    top:0;
    width:100%;
    z-index:1;
    }

    .navbar-right{
    float:right;
    padding-right:10%;
    }

    .navbar-right a{
    text-decoration:none;
    padding:10px;
    color: #fff;
    font-family:Arial;
    font-weight:900;
    }

    .navbar-right a:hover{
    text-decoration:underline;
    }
    .navbar-logo{
    padding-left:10%;
    font-family:Arial;
    font-size:30px;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
    }

    .video-container {
    z-index: -100;
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    }

    #video-bg{
    width:100%;

    }

    Controlmydestiny.com
    	<nav class="navigation">
     	 <a href="#" class="navbar-logo">Logo</a>
      	<div class="navbar-right">
        	<a href="#">About</a>
        	<a href="#">Blog</a>
        	<a href="#">Contact</a>
     	</div>
    	</nav>
    
    <div class="video-container">
      <video autoplay loop muted id="video-bg">
    
        <source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4">
    
      </video>
    </div>
    

    I hope I made it clear.

    Peace

  • How about linking to the Codepen item so we can get a visual look at what you’re asking about. Even then, though, I don’t really understand what you’re wanting to achieve. You might want to provide a more thorough description or, better still, an image.

    1 Like

    Hey

    Everytime I try to post a link I get a notifcation with “sorry you can not include links in your post”

    link:https://codepen.io/casuru/pen/RPMyyp

    I would like to change it in to this picture.


    Moderator note: Sorry about that. The forum software is set to prevent new forum members from posting links until they’ve met certain criteria. It helps keep the spam posts down to manageable levels. I’ve gone ahead and bumped up your access level by a notch, so you won’t run into this problem again. I’ve also fixed your link.

    I still don’t understand exactly what you’re trying to do, and I don’t know what “25% with (width?) and with each” means or what “until it is completely at the bottom” refers to. Sorry.

    Despite that, here’s a start where I’ve just modified the existing code. Personally, I would have coded it a bit differently. I’ve only included the code pertinent to the logo and navigation menu. I have not included all the code relevant to the video since your question wasn’t about that. Let us know if you have other questions.

    Here’s the HTML starting at the header and ending with the /nav

    <header>
        <div class="header">
            <nav class="navigation">
                <a href="#" class="navbar-logo">Logo</a><br />
                <div class="navbar-left">
                     <a href="#">About</a><br />
                     <a href="#">Blog</a><br />
                     <a href="#">Contact</a>
               </div>
         </nav>
    

    Here’s the CSS that, again, only pertains to the logo and navigation menu

    .navigation {
      padding: 30px 0 30px 15px;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }
    
    .navbar-left {
      margin-top: 20px;
    }
    
    .navbar-left a {
      text-decoration: none;
      color: #fff;
      font-family: Arial;
      font-weight: bold;
      line-height: 1.4em;
    }
    
    .navbar-left a: hover {
      text-decoration: underline;
    }
    .navbar-logo {
      font-family: Arial;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #fff; 
    }
    

    Here’s what it looks like in Codepen

    image

    1 Like

    by

    I meant by that, that I would like a new nav in it on the left side with 25% width and code the video next to it with 75% width so it fits in one section. maybe it needs inline-block.

    and this

    I see you understood it because the code that you made is exactly what I want and I also want the video next to it but I will try this without editing someone else’s code now and try it by my self from scratch.

    Thanks for your effort

    I should have paid more attention to your sketch. I created a new Codepen page where I’ve organized things more along the lines of your sketch and stripped out lots of the stuff that didn’t seem to relate to your question. I just noticed your sketch also has information in the upper right corner, but you should be able to figure out how to place it there. If not, let me know.

    https://codepen.io/quercus-gambelii/pen/RwPvRZK

    For what it’s worth, there are certainly other, possibly better ways to code this than what I quickly wrote down. Like I said before, though, it’s a start.

    1 Like

    Thanks this is exactly what I asked for:)

    ©2020 Graphic Design Forum | Contact | Legal | Twitter | Facebook