Website marketing using high authority backlinks from popular website's, find out more at webcentreplus.com or email colin@webcentreplus.com
Click Here!

Web Development: 08 – Responsive Top Menu Navigation HTML/CSS

Part of the new series for teaching you web development.

We start by making the most complicated part of the website, the responsive top menu with a hamburger for mobile sites.

Getting source code:

– Download DnaWeb http://www.dnaweb.io
– Create empty folder
– In address bar type: dnaweb
– Once its open, type “new template fabric.modern1” and press enter twice

Alternatively you can check out the source embedded here https://github.com/angelsix/dna-fabric/tree/master/Template/Source (the modern1.dhtml in Html folder shows the top menu)

source – For all your website needs, visit out Spalding Web Design

8 Responses to Web Development: 08 – Responsive Top Menu Navigation HTML/CSS

  • Thank you…one question:How is web development using DNAWeb is different from developing using normal HTML,CSS,Javascript, Bootstrap etc?

  • Emre Can says:

    Perfect intro. You have changed something in your channel (icon,wallpaper). It is the best thing " my.dna+= code" and then share my dna.it is so impressive sentence.
    I want to improve myself and skill so much like you.That's all.

  • Mehdi Este says:

    Luke if there was an idea that someone had and they presented it to you. Would you be interested on working on it if you see potential or a real opportunity?

  • Ilya Zhidkov says:

    Hi, Angel. Cool intro. I first thought it was a land of Great Britain xD. You can use windows key + arrows to automatically adjust window to any quadrant you want (in case you didn’t know). Also, I noticed that you are using Kasperski Anti-Virus. Does it have any performance issues? I remember having Eset Smart and the whole PC was a bit buggy because of scanning… I now use default Windows Defender because I use PC only for development.

  • First of all thanks for the great guides and DNAWeb.

    I noticed an issue that i can't seem to fix by myself. All of the fabric.* templates do not have a vertical scrollbar in my browsers (firefox/edge). In Firefox i cannot scroll no matter what i do. In Edge i can force it by grabbing the text. I figured its some bug in base/_dna_fabric.normalize.scss but i can't find it.

  • lolRiky says:

    In dnaweb version 1.0.6.0 command "new template fabric.blank" generate javascripts which is link to nowhere. Folder JS doesn't exist, also .css file is generated by name modern1.css that doesn't exist also. style.css do exist and Images folder doesn't exist either. Also the compiled .css looks so awful, is there anything that can fix it?. Anyway enough of negativity. I love dnaweb, can't even descripe how much i love it. Definitly will share with people.

    Also wanted to ask you. What do you think about react j?

  • The Dna Web framework is great

  • Naukhez Ali says:

    It seems like this fabric framework has been updated since you made this video. Parts of the code you was writing was already done for me. For example the
    1. menu hiding when below laptop,
    2.Having the menu horizontally from the beginning without the bullet points,
    3.the menu's items where already inline blocks etc..
    4.It also won't allow me to float the menu or the hamburger sign to the right..
    is this right? or have i done something wrong?

Leave a Reply

Archives