CSS Tutorial: Creating a Navigation Menu | Web Development Tutorials #23

CSS Tutorial: Making a Navigation Menu | Net Growth Tutorials #23

by



► Supply Code & Notes: https://codewithharry.com/movies/web-development-in-hindi-23
►This video is part of this Full Net Growth in Hindi Course Playlist: https://www.youtube.com/playlist?listing=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg
►Click on right here to subscribe – https://www.youtube.com/channel/UCeVMnSShP_Iviwkknt83cww
►Checkout my English channel right here: https://www.youtube.com/ProgrammingWithHarry

Finest Hindi Movies For Studying Programming:

►Study Python In One Video – https://www.youtube.com/watch?v=ihk_Xglr164

►Python Full Course In Hindi – https://www.youtube.com/playlist?listing=PLu0W_9lII9agICnT8t4iYVSZ3eykIAOME

►C Language Full Course In Hindi –
https://www.youtube.com/playlist?listing=PLu0W_9lII9aiXlHcLx-mDH1Qul38wD3aR&disable_polymer=true

►JavaScript Full Course In Hindi –
https://www.youtube.com/playlist?listing=PLu0W_9lII9ajyk081To1Cbt2eI5913SsL

►Study JavaScript in One Video – https://www.youtube.com/watch?v=onbBV0uFVpo

►Study PHP In One Video – https://www.youtube.com/watch?v=xW7ro3lwaCI

►Django Full Course In Hindi –
https://www.youtube.com/playlist?listing=PLu0W_9lII9ah7DDtYtflgwMwpT3xmjXY9

►Machine Studying Utilizing Python – https://www.youtube.com/playlist?listing=PLu0W_9lII9ai6fAMHp-acBmJONT7Y4BSG

►Creating & Internet hosting A Web site (Tech Weblog) Utilizing Python – https://www.youtube.com/playlist?listing=PLu0W_9lII9agAiWp6Y41ueUKx1VcTRxmf

►Superior Python Tutorials – https://www.youtube.com/playlist?listing=PLu0W_9lII9aiJWQ7VhY712fuimEpQZYp4

►Object Oriented Programming In Python – https://www.youtube.com/playlist?listing=PLu0W_9lII9ahfRrhFcoB-4lpp9YaBmdCP

►Python Information Science and Massive Information Tutorials – https://www.youtube.com/playlist?listing=PLu0W_9lII9agK8pojo23OHiNz3Jm6VQCH

Observe Me On Social Media
►Web site (created utilizing Flask) – http://www.codewithharry.com
►Fb – https://www.fb.com/CodeWithHarry
►Instagram – https://www.instagram.com/codewithharry/
►Private Fb A/c – https://www.fb.com/geekyharis
Twitter – https://twitter.com/Haris_Is_Here

source

44 thoughts on “CSS Tutorial: Making a Navigation Menu | Net Growth Tutorials #23”

  1. 7:4 Why Did the Search Box Appear in the Upper Right Corner?

    Your code builds not just software, but dreams. Keep inspiring!
    With every line of code, you unlock new possibilities and empower others. Keep pushing the boundaries and making a difference through your work.
    May your code be clean, your logic sharp, and your creativity boundless.

    Reply

  3. Superb as always. I cant thank you enough for all that you've done for us. your kind acts are truly appreciated and I would happily repay your kindness in any form when the time comes. Lots of appreciations, gratitude and regards to you from Pakistan.

    Reply

  4. Sir mai चाहता हूं जब मैं होम मेन्यू में क्लिक करू तो ये ओपन हो और इसके अंदर दूसरा पेज ओपन हो तो ये कैसे कर सकता हु

    Reply

  8. i have design top 2 lines of boot starp website with small changes .
    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Naviagtion</title>

    </head>

    <style>

    * {

    box-sizing: border-box;

    }

    .nav {

    background-color: #7952b3;

    /* border-radius: 30px; */

    }

    .nav ul {

    overflow: auto;

    margin-top: -0.5px;

    margin-left: none;

    margin-right:none

    }

    .nav li {

    float: left;

    list-style: none;

    margin: 10px 20px;

    }

    .nav li a {

    padding-bottom: 3px 3px;

    text-decoration: none;

    color: rgba(255, 255, 255, 0.74);

    }

    .search {

    float: right;

    padding: 7px 5px;

    }

    .nav input {

    border: 2px solid black;

    border-radius: 14px;

    padding: 4px 25px;

    width: 168px;

    }

    .nav li a:hover {

    color: white;

    }

    .Top a {

    background-color: #563d7c;

    color: #fff;

    text-decoration: none;

    text-align: center;

    padding-left: 1rem;

    padding-top: 1rem;

    padding-bottom: 1rem;

    padding-right: 0.5rem;

    display: block;

    }

    .btn {

    font-weight: 600;

    background-color: #7952b3;

    color: #ffe484;

    border-color: #ffe484;

    }

    .btn:hover {

    color: black;

    background-color: #ffd747;

    }

    .btn {

    margin: 1%;

    }

    </style>

    <body>

    <div class="Top">

    <a href="https://google.com">There's a newer version of Bootstrap!</a>

    </div>

    <div>

    <nav class="nav">

    <ul>

    <li><a href="https://google.com" target="balnk">Home</a></li>

    <li><a href="https://google.com" target="balnk">Documentation</a></li>

    <li><a href="https://google.com" target="balnk">Examples</a></li>

    <li><a href="https://google.com" target="balnk">Icons</a></li>

    <li><a href="https://google.com" target="balnk">Themes</a></li>

    <li><a href="https://google.com" target="balnk"> Blog</a></li>

    <li><a href="https://google.com" target="balnk">Expo</a></li>

    <button class="btn">Download</button>

    <div class="search">

    <input type="text" name="search" placeholder="Search..">

    </div>

    </ul>

    </div>

    </nav>

    </div>

    </body>

    </html>

    Reply

  12. Hey harry thanks for this video i need on more help when i click on inspect i am not able to see style elements where you where manipulating values and checking weather it looks good or not i am using microsoft edge as deafult browser can you help me to activate this feature plss

    Reply

  16. .search{
    float: right;
    color: white;
    padding: 12px 75px;
    }
    What's the purpose of color in this? I have tried putting different colors but it didn't work. Only the background color changes but simple color doesn't change. If anyone can tell me it's purplse then please comment below.

    Reply

  22. bhai mere harry mere dildaar ek number mere bhai tune to lajawaab maja bana di
    par tu mere bhai mere dildarr tu chhote video banao hamra dimag kishak gaya 100 time mistake huvi
    ab jaldi se jaldi html canvas and Svg ka video banao

    Reply

  36. ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

    Reply

  44. There was a lot to learn in this video. Surely will need to come back to it again to get navigation well again. Thanks for making this top quality tutorial available for us for free Harry Bhai!

    Reply

Leave a Comment