I have in website https://11humans.com/sakums/ menu on large screens vertically, how can I make it is horizontal not on top of eachother one item? Thank you
There are lots of examples online about how to have responsive menus. Essentially you're having one set of css for phone, iPad, screen. I haven't read this properly but generally I find css-tricks reliable: https://css-tricks.com/responsive-menu-concepts/
That's a stunning example of a website I'd drag 'round back 'o the woodshed with a .30-06 and put down like Old Yeller. There is NOTHING of value from a code perspective to save from that train wreck laundry list of how NOT to build a website. As evident from the 117 scripts totalling over 2.6 megabytes and the absolutely batshit INSANE 102 separate stylesheets totaling over 3.7 megabytes. Hardly a shock it takes over 40 seconds to load here due to handshake overhead alone. Whoever or whatever was used to build that site needs to be put down hard. A bullet to the brain would be doing it a huge favor as issues with menu layout are the LEAST of its problems. I mean, I'm used to turdpress being an utter disaster, but this dials the worst of it way beyond 11. ANYONE who tells you this site is "fine" needs a quadruple helping of sierra tango foxtrot uniform as they know jack about s***. As evidenced by code like this: <body data-rsssl=1 class="page-template-default page page-id-10 wp-embed-responsive theme-itok woocommerce-no-js extensive-vc-1.8.1 evc-predefined-style wpb-js-composer js-comp-ver-6.2.0 vc_responsive"> <div id="wrapper-container" class="wrapper-container"> <div id="apus-mobile-menu" class="apus-offcanvas hidden-lg hidden-md"> <div class="apus-offcanvas-body"> <div class="offcanvas-head bg-primary"> <a class="btn-toggle-canvas" data-toggle="offcanvas"> <i class="fa fa-close"></i> <strong>MENU</strong> </a> </div> <nav class="navbar navbar-offcanvas navbar-static" role="navigation"> <div class="navbar-collapse navbar-offcanvas-collapse"><ul id="main-mobile-menu" class="nav navbar-nav"><li id="menu-item-868" class="active menu-item-868"><a href="https://11humans.com/sakums/">Sākums</a></li> <li id="menu-item-873" class="menu-item-873"><a href="https://11humans.com/cenas/">Cenas</a></li> <li id="menu-item-876" class="menu-item-876"><a href="https://11humans.com/par-mums/">Par mums</a></li> <li id="menu-item-893" class="menu-item-893"><a href="https://11humans.com/kontakti/">Kontakti</a></li> </ul></div> </nav> <ul class="mobile-socials"> <li class="social-top"> <a href="#"> <i class="fa fa-facebook "></i> </a> <a href="#"> <i class="fa fa-twitter"></i> </a> <a href="#"> <i class="fa fa-youtube"></i> </a> <a href="#"> <i class="fa fa-google-plus"></i> </a> <a href="#"> <i class="fa fa-pinterest"></i> </a> </li> </ul> </div> </div> <div class="over-dark"></div> <div id="apus-header-mobile" class="header-mobile hidden-lg hidden-md clearfix"> <div class="container"> <div class="row"> <div class="table-visiable"> <div class="col-xs-2"> <div class="box-left"> <a href="#navbar-offcanvas" class="btn btn-showmenu btn-toggle-canvas"><i class="fa fa-bars"></i></a> </div> </div> <div class="text-center col-xs-8"> <div class="logo"> <a href="https://11humans.com/" > <img src="https://11humans.com/wp-content/uploads/2020/09/11_humans_logo-04.png" alt="11humans – a social learning network"> </a> </div> </div> <div class="col-xs-2"> </div> </div> </div> </div> </div> <header id="apus-header" class="apus-header header-v1 hidden-sm hidden-xs" role="banner"> <div class=""> <div class=""> <div class="header-inner"> <div class="wrapper-large"> <div class="container-fluid"> <div class="header-middle"> <div class="row"> <div class="table-visiable-dk"> <div class="col-md-2"> <div class="logo-in-theme "> <div class="logo"> <a href="https://11humans.com/" > <img src="https://11humans.com/wp-content/uploads/2020/09/11_humans_logo-04.png" alt="11humans – a social learning network"> </a> </div> </div> </div> <div class="col-md-7"> <div class="main-menu"> <nav data-duration="400" class="hidden-xs hidden-sm apus-megamenu slide animate navbar p-static" role="navigation"> <div class="collapse navbar-collapse no-padding"><ul id="primary-menu" class="nav navbar-nav megamenu"><li class="active menu-item-868 aligned-left"><a href="https://11humans.com/sakums/">Sākums</a></li> <li class="menu-item-873 aligned-left"><a href="https://11humans.com/cenas/">Cenas</a></li> <li class="menu-item-876 aligned-left"><a href="https://11humans.com/par-mums/">Par mums</a></li> <li class="menu-item-893 aligned-left"><a href="https://11humans.com/kontakti/">Kontakti</a></li> </ul></div> </nav> </div> </div> <div class="col-md-3"> <div class="action-right"> <a class="btn btn-small btn-dark" href="#"> N/A </a> <a class="btn btn-small btn-blue" href="#"> N/A </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </header> Code (markup): Doing the job of: <body> <header> <h1> <a href="/"> 11Humans<br> <small>Be Your best self</small> </a> </h1> <a href="#mainMenu" class="modalOpen" hidden aria-hidden="true"> <div id="mainMenu"> <a href="#" class="modalClose" hidden aria-hidden="true"></a> <div><nav> <a href="#" class="modalClose" hidden aria-hidden="true"></a> <ul> <li><a sakums/">Sakums</a></li> <li><a cenas/">Cenas</a></li> <li><a par-mums/">Par mums</a></li> <li><a kontakti/">Kontakti</a></li> <li class="alt featured"><a href="#">M/A</a></li> <li class="alt"><a href="#">N/A></li> </ul> </nav></div> <!-- #mainMenu -->/div> </header> Code (markup): 3.3k of incompetence doing ~700 bytes flipping job, scripttardery where none is needed, etc, etc, etc. Multipleid across the entire document and multiple pages? Utter and epic /fail/ at the most basic of web development concepts.
Edgars Sautins This is how you can make the menu vertical with HTML and CSS only. It is also responsive. https://codepen.io/brandon_wallace/pen/wYBxeQ HTML <nav> <ul id="menu"> <li><a href="#">Skills</a></li> <li class="hidden"><a href="#">HTML</a></li> <li class="hidden"><a href="#">CSS</a></li> <li class="hidden"><a href="#">Javascript</a></li> <li class="hidden"><a href="#">Python</a></li> <li class="hidden"><a href="#">Flask</a></li> <li class="hidden"><a href="#">Nodejs</a></li> </ul> </nav> Code (markup): CSS nav { margin: 0 0.5rem; } #menu { width: 100%; /* Remove default UL padding on the left. */ padding-left: 0; /* Use flexbox to create column. No floats. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; /* Remove the bullet points from the LI items. */ list-style-type: none; } li a { color: var(--slate); font-weight: bold; /* Remove underline for hyperlinks. */ text-decoration: none; } li:hover a { color: var(--darkness); } li { padding: 15px; /* Create a thin line to seperate list items. */ margin-bottom: 1px; background-color: var(--shadow); } li:hover { background-color: var(--mold); } /* Hide the list items by default mobile first mode. */ .hidden { display: none; } /* Show the list items on hover. */ #menu:hover .hidden { display: block; } /* MOBILE FIRST MEDIA QUERY Screens below 576px wide (smartphones) get the dropdown menu (default behavour). Screens above 576px wide get the horizontal menu. */ @media only screen and (min-width: 576px) { #menu { /* Flex back to row in desktop mode. */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .hidden { /* Unhide the list items in desktop mode. */ display: block; } li { /* Create a thin line to seperate list items. */ margin-right: 1px; } } Code (markup):
Site is slower than molasses. Takes over a minute to load on a high speed connection. Either get rid of the popup (ideal) or at least add a way to either block it or close it.
This is wp isn't it!? I mean you cannot just add some new links + css to a wp-site, without understanding how to develop with wp.