How do i create sample menu nav in Joomla

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2018 1:52 pm

How do i create sample menu nav in Joomla

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?
You do not have the required permissions to view the files attached to this post.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 25874
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: How do i create sample menu nav in Joomla

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


shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create sample menu nav in Joomla

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

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 11161
Joined: Thu Feb 15, 2007 5:48 am
Location: Oxford, UK

Re: How do i create sample menu nav in Joomla

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

shaibustephen wrote:Kindly view the attachment below
No screenshot included.
Toivo Talikka, Global Moderator

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create sample menu nav in Joomla

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

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 11161
Joined: Thu Feb 15, 2007 5:48 am
Location: Oxford, UK

Re: How do i create sample menu nav in Joomla

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.
Toivo Talikka, Global Moderator

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create sample menu nav in Joomla

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
You do not have the required permissions to view the files attached to this post.

User avatar
AMurray
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4805
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: How do i create sample menu nav in Joomla

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.
Regards,
--------------------------------------------------------------
A Murray
Millennium Falcon - it's the ship that made the Kessel run in less than 12 parsecs! The fastest hunk of junk in the galaxy.

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create sample menu nav in Joomla

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

kindly view the enlarged attachment

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 11161
Joined: Thu Feb 15, 2007 5:48 am
Location: Oxford, UK

Re: How do i create sample menu nav in Joomla

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

Where is it?
Toivo Talikka, Global Moderator

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create sample menu nav in Joomla

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

a.png
You do not have the required permissions to view the files attached to this post.

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2018 1:52 pm

Re: How do i create sample menu nav in Joomla

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;
}
}


Post Reply

Return to “Templates for Joomla! 3.x”