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.

menu make horizontal not vertical items

Discussion in 'HTML & Website Design' started by Edgars Sautins, Sep 24, 2020.

  1. #1
    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
    SEMrush
     
    Edgars Sautins, Sep 24, 2020 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    26,445
    Likes Received:
    3,957
    Best Answers:
    111
    Trophy Points:
    665
    #2
    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/
     
    sarahk, Sep 24, 2020 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,401
    Likes Received:
    1,876
    Best Answers:
    245
    Trophy Points:
    515
    #3
    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 &#8211; 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 &#8211; 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.
     
    Last edited: Sep 24, 2020
    deathshadow, Sep 24, 2020 IP
  4. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    100
    #4

    I miss you @deathshadow. Classic!
     
    rolodex, Sep 29, 2020 IP
    kk5st likes this.