How do i create sample menu nav in Joomla

shaibustephen · Post by **shaibustephen** » Sun May 19, 2019 8:23 pm

Please, whoo can direct me on how to get the same menu sample below using bootstrap 4.3.1 on joomla to have menu description below the title menu as show in the sample menu. Also, how do i make the bootstrap menu on point hover down just like the case of the sample menu?

Post by **Per Yngve Berg** » Mon May 20, 2019 1:39 pm

https://getbootstrap.com/docs/4.3/examples/navbars/#

shaibustephen · Post by **shaibustephen** » Mon May 20, 2019 4:56 pm

i actually use the boostrap menu nav sample link you forwarded to me. My question is that how do i get exact menu as show in the screen shot below having description menu below the menu items. Kindly view the attachment below

Post by **toivo** » Mon May 20, 2019 5:24 pm

shaibustephen wrote:Kindly view the attachment below

No screenshot included.

shaibustephen · Post by **shaibustephen** » Tue May 21, 2019 6:46 pm

i dont know how to attached screen shot on this my comment post. Guide me please

Post by **toivo** » Tue May 21, 2019 8:00 pm

Save the screenshot to your workstation as an image file, for example .jpg, and then go to the Attachments tab (next to Options under the Submit buttion), click the button 'Add files', find the file and submit the post.

shaibustephen · Post by **shaibustephen** » Wed May 22, 2019 8:17 pm

kindly view the screen shot of the sample menu below. How do i achieve where the arrow is pointed above

Post by **AMurray** » Sat May 25, 2019 2:15 am

need larger image - it won't open to the enlarged version. Can't read the detail in the image.

shaibustephen · Post by **shaibustephen** » Sun May 26, 2019 6:29 pm

kindly view the enlarged attachment

Post by **toivo** » Sun May 26, 2019 7:00 pm

Where is it?

shaibustephen · Post by **shaibustephen** » Sun May 26, 2019 7:42 pm

a.png

shaibustephen · Post by **shaibustephen** » Tue May 28, 2019 5:19 pm

This is the html code and css of the above screen shot. My concern here is what code should i place to form the title page below the menu

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>

<body>
<header>
<nav role="navigation">
<ul>
<li>
<a href="/">
<div>
Home
<span>there's no place like it</span>
</div>
</a>
</li>
<li>
<a href="/blog">
<div>
Blog
<span>my thoughts rock</span>
</div>
</a><div>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
</ul>
</div>
</li>
<li>
<a href="/contact">
<div>
Contact
<span>drop me a line</span>
</div>
</a>
</li>
<li>
<a href="/forum">
<div>
Forum
<span>chat with others</span>
</div>
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>

* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block;}
html {font-size: 100%;height: auto !important;height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.clear {display: block; }
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}

/*GENERIC STYLES*/
body { background: #f2f2f2;color: #222;-webkit-font-smoothing: antialiased;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 1.05em;font-weight: 400;height: auto !important;height: 100%;line-height: 1.6rem;min-height: 100%;}
/*NAV*/
header {
background: linear-gradient(to left,rgba(54,194,182,0.96) 0,rgba(62,188,207,0.96) 100%);
border-bottom: 1px solid rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
display: block;
position: fixed;
width: 100%;
z-index: 1000;
}

header > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}

header > nav > ul > li {
flex: 0 1 auto;
margin: 0;
padding: 0;
position: relative;
transition: all linear 0.1s;
}

header > nav > ul > li:hover {
background: rgba(58,162,173,1);
}

header > nav > ul > li a + div {
background: linear-gradient(to bottom,rgba(58,162,173,1) 0,rgba(62,188,207,0.96) 100%);;
border-radius: 0 0 2px 2px;
box-shadow: 0 3px 1px rgba(0,0,0,.05);
display: none;
font-size: 1rem;
position: absolute;
width: 195px;
}

header > nav > ul > li:hover a + div {
display: block;
}

header > nav > ul > li a + div > ul {
list-style-type: none;
}

header > nav > ul > li a + div > ul > li {
margin: 0;
padding: 0;
}

header > nav > ul > li a + div > ul > li > a {
color: rgba(255,255,255,.9);
display: block;
font-size: .75rem;
letter-spacing: 1.5px;
padding: .25rem 1.5rem;
text-decoration: none;
text-transform: uppercase;
}

header > nav > ul > li a + div > ul > li:hover > a {
background-color: rgba(0,0,0,.15);
}

header > nav > ul > li > a {
align-items: flex-start;
color: #fff;
display: flex;
font-size: 1.55rem;
font-weight: 200;
letter-spacing: 1px;
max-width: 130px;
padding: 1rem 1.5rem;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.1);
transition: all linear 0.1s;
}

header > nav > ul > li > a > div > span {
color: rgba(255,255,255,.75);
display: block;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .7rem;
font-style: italic;
line-height: 1rem;
max-width: 260px;
}

@media (min-width: 990px) {
header > nav > ul > li > a {
max-width: 500px;
font-size: 1.7rem;
line-height: 2rem;
}

header > nav > ul > li > a > div > span {
margin: 4px 0 0;
}
}

The Joomla! Forum™

How do i create sample menu nav in Joomla

How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla

Re: How do i create sample menu nav in Joomla