I'm attempting to have a portion of my React code appear in an in-line block using "flex-row" as a class name, but it's not working. I've looked at other questions and haven't been able to find the answer needed (I'm attempting it without using the "View" wrapper). My code is as follows (but my result is does not show the list in an in-line block; see attached image below):
<header data-testid="header" className="flex-row px-1">
<nav>
<ul className="flex-row">
<li className="mx-2">
<a href="#language" onClick={() => handleClick()}>
Language
</a>
</li>
<li>
<a href="#about" onClick={() => handleClick()}>
About Us
</a>
</li>
</ul>
</nav>
</header>
I feel like it's a simple fix, but any help is greatly appreciated. Thank you in advance!
I think you are using TailwindCSS. If so add a flex class before "flex-row" in element. Hope this will sort your issue/.
<header data-testid="header" className="flex-row px-1">
<nav>
<ul className="flex flex-row">
<li className="mx-2">
<a href="#language" onClick={() => handleClick()}>
Language
</a>
</li>
<li>
<a href="#about" onClick={() => handleClick()}>
About Us
</a>
</li>
</ul>
</nav>
</header>
It truly was a simple fix...lol. I had code for the navigation options "Language" and "About Us" to be in an in-line block (hence the "flex-row" denomination), yet I have <li> tags around the two navigation options. Once I took off the tag, it worked. Thanks, everyone! corrected image displayed here
Related
I would like to make a profile menu like in Gmail what contains the user's display name and his user name and also two buttons with settings and logout. I would like to make it in angular 8.
http://prntscr.com/q1vd8y
<li>
<!-- user profile -->
<div class="profile">
<img class="avatar" src="" /><span></span>
<!-- more menu -->
<ul class="menu">
<li class="name">{{name}}</li>
<li class="name">{{useremail}}</li>
<li class="name">{{visiblename}}</li>
<li>Settings</li>
<li><a [routerLink]='["/logout"]'>Log out</a></li>
</ul>
</div>
</li>
</ul>
https://material.io/design/
here it is, my friend, the one and only, Material Design !
you can find css frameworks that will help you do it like
https://materializecss.com/
for example !
https://material.angular.io/ for angular
I am trying to get a sidemenu to work on Materialize when should be very simple:
First I add the sidenav content to the page:
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Then I add the jquery code:
$( document ).ready(function() {
$('.sidenav').sidenav();
});
And finally the part where to problem is:
I have a nav which goes at the top of the page:
<nav>
<div class="nav-wrapper">
<img src="icon.png" alt="" />
<ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
<li>Trigger SideNav</li><!-- This is just not showing -->
</ul>
</div>
</nav>
For some reason this menu is not showing:
<li>Trigger SideNav</li>
unless I take this off it ... data-target="slide-out" class="sidenav-trigger"
How can I fix this?
In addition to what Moein said (the sidenav-trigger menu only appears when the page width is less than 993px), you can make it appear all the same adding the show-on-large class to your menu button.
Something like:
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Menu</li>
<li>Info</li>
</ul>
</div>
</nav>
as I know this is not a problem and the element that has sidenav-trigger class will be shown when the width of the browser is less than 993px. just resize your browser window width to reach less than 993px and see the result.
If it does not work:
I think the problem can be with the content of your link. replace the image with a text and try again.
For reputation reasons, I'm not allowed to comment. It'll work with the javascript code
document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});
Instead of the code which is given in the official documentation you've to change this piece of code
M.Sidenav.init(elems, options);
with this
M.Sidenav.init(elems, {});
With the official javascript code you'll notice that there's an error in the console when you load the page.
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
I'm creating my own wordpress template and I've coded a jQuery drop down menu that works statically but now I'm trying to make it dynamic the css is messed up. The drop down works but the menu doesn't displaying correctly.
The main menu displays vertical instead of horizontal and the secondary menu is horizontal, instead of vertical. Also the orange type for the main menu isn't displaying.
Here's a working static version
I hope I'm explaining myself thoroughly, if you need any more info please let me know.
Here is my wordpress template code
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Menu</span>
<!-- Increases to 510px in width-->
<div class="sub_wrap">
<div class="ldd_submenu">
<nav>
<li class="ldd_heading"></li>
<?php wp_nav_menu(array('menu' => 'main_nav')); ?>
</nav>
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
</div>
</li>
</ul>
</div>
<div></div>
I would suspect your code is not handling the output format of the wp_nav_menu method. Now I am not sure of your exact version, but newer versions will out put like this. So you will get extra div added in that you might not expect and the way the child menus are output may not be what you expect. Also, as the previous people said your code is not quite right, missing some tags.
<div class="menu-id-container">
<ul class="nav-menu" id="menu-id">
<li class="..." id="..">LINK
<ul class="sub-menu">
<li>Child LINK1</li>
</ul>
</li>
<li class="..." id="...">LINK2</li>
</ul>
</div>
I have my website here - http://thezoomer.net/clubroyale/
if you look at the submenu from ABOUT US or at the CONTACT US menu item with Firebug, you will see Cufon draws unnecessary canvases.
Any idea ? Thanks!
A solution I found is to get rid of all whitespace in the HTML, so this:
<li class="dir nav-item">ABOUT US
<div class="subnav-con">
<div class="nav-top">
</div>
<ul class="nav">
<li class="nav-item">HISTORY</li>
<li class="nav-item">VISION</li>
<li class="dir nav-item">TEAM
</li>
<li class="nav-item">CLIENTS</li>
<li class="nav-item">TESTIMONIALS</li>
<li class="nav-item">PRESS</li>
<li class="nav-item">FAQ</li>
</ul>
<div class="nav-bottom"></div>
</div>
</li>
becomes this:
<li class="dir nav-item">ABOUT US<div class="subnav-con"><div class="nav-top"></div><ul class="nav"><li class="nav-item">HISTORY</li><li class="nav-item">VISION</li><li class="dir nav-item">TEAM</li><li class="nav-item">CLIENTS</li><li class="nav-item">TESTIMONIALS</li><li class="nav-item">PRESS</li><li class="nav-item">FAQ</li></ul><div class="nav-bottom"></div></div></li>
There's possibly a neater way involving CSS, but I'm not going to look for it unless you really want me to.