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.

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

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    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,732
    Likes Received:
    1,998
    Best Answers:
    253
    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:
    175
    #4

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

    brandon_wallace Peon

    Messages:
    23
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    3
    #5
    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):
     
    brandon_wallace, Nov 15, 2020 IP
  6. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #6
    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.
     
    mmerlinn, Nov 16, 2020 IP
  7. iago111

    iago111 Member

    Messages:
    99
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    33
    #7
    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.
     
    iago111, Nov 20, 2020 IP