So I've been working on this site for a friend and everything works fine except for a few buttons and images move around when the window is resized. How do I counter this problem?
Full window
http://i.stack.imgur.com/JuuEa.png
Resized
http://i.stack.imgur.com/UaqCI.png
<div id="topnav">
<ul id="topnav li">
<li id="charactersearch">
</li>
<li id="highscores">
</li>
<li id="forum">
</li>
<li id="facebook">
</li>
<li id="youtube">
</li>
<li id="guilds">
</li>
<li id="deaths">
</li>
</ul>
</div>
You have set the position for all your icons to be absolute.
left: 610px;
left: 690px;
left: 805px;
Etc. When you are resizing your windows they stay X pixels away from left.
Try to put your icons in a list
<div id="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact us</li>
</ul>
</div>
With a CSS like this
#navigation {
position: relative;
background-color:yellow;
}
#navigation ul li {
margin-left:10%;
display:inline;
}
EDIT: Are you setting your images through css? Your link doesn't appear to have anything inside. Can you add the image inside the link?
<li id="forum"></li>
<li id="forum"><image scr=""/></li>
Related
I make a sidebar with UIKIT Nav component.
http://getuikit.com/docs/nav.html
That could be able to make accordion like this.
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
parrent
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
current
</li>
<li>
not current
</li>
</ul>
</li>
</ul>
If I click accordion menu. Tag will change it.
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent uk-open" aria-expanded="true">
parent
<div style="overflow: hidden; position: relative;">
<ul class="uk-nav-sub uk-nav-side">
<li class="uk-active">
current
</li>
<li>
not current
</li>
</ul>
</div>
</li>
</ul>
If I do page reload, All accordion will close.
So what do I wanna ask you the question is how to always open when the request-url is current?
I wanna always open the parent ul tag that nest class uk-active li tag.
I think that will be able with jQuery or PHP.
any ideas?
I'm sorry to reply this too late.
Finally, I understand always open trigger is 'uk-active' class.
There are no relation with 'uk-open', aria-expanded="true" or div bla bla bla.
Just set 'uk-active' class on element you wanna always show it.
So, This is my solution.
http://codepen.io/qwe001/pen/JKgBBx
And ya, Need to use $_SERVER['REQUEST_URI'] to set uk-active class.
Btw, I use php framework Laravel5. So my code is like this.
<div class="uk-width-medium">
<div class="uk-panel uk-panel-box">
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent {{ Request::is('admin/parent1*') ? 'uk-active' : '' }}">
Parent 1 (Have Nest and Nest is current)
<ul class="uk-nav-sub uk-nav-side">
<li class="{{ Request::is('admin/parent1/nest1*') ? 'uk-active' : '' }}">
Nest 1 (current)
</li>
<li class="{{ Request::is('admin/parent1/nest2*') ? 'uk-active' : '' }}">
Nest 2 (not current)
</li>
<li class="{{ Request::is('admin/parent1/nest3*') ? 'uk-active' : '' }}">
Nest 3 (not current)
</li>
</ul>
</li>
<li class="{{ Request::is('admin/parent2*') ? 'uk-active' : '' }}">
Parent 2 (Not Nest)
</li>
<li class="uk-parent {{ Request::is('admin/parent3*') ? 'uk-active' : '' }}">
Parent 3 (Have Nest but Current nests are nothing)
<ul class="uk-nav-sub uk-nav-side">
<li class="{{ Request::is('admin/parent3/nest1*') ? 'uk-active' : '' }}">
Nest 1 (not current)
</li>
</ul>
</li>
</ul>
</div>
</div>
NOTE: Must need adjust parent uk-parent class color like this.
/* Adjust Parent Background Color */
.uk-nav-side > li.uk-parent.uk-active > a {
background: inherit;
color: inherit;
}
.uk-nav-side > li.uk-parent.uk-active > a:hover,
.uk-nav-side > li.uk-parent.uk-active > a:focus {
background: rgba(0, 0, 0, 0.05);
color: #444;
outline: none;
}
/* Adjust Parent Child Padding */
.uk-nav-side > li.uk-parent .uk-nav-side > li > a {
padding-left: 1em;
}
.uk-nav-side > li.uk-parent .uk-nav-side > li.uk-active > a:hover {
color: #FFF;
}
i dont know your another code, but a way is this:
Your url: index.php?id=2
<?php
$page = (isset($_GET['id']))?(int)$_GET['id']:'';
?>
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav="{multiple:true}">
<li class="uk-parent">
parrent
<ul class="uk-nav-sub uk-nav-side">
<li class="<?=(($page==2)?'uk-active':'')?>">
current
</li>
<li>
not current
</li>
</ul>
</li>
</ul>
This code:
<?=(($page==2)?'uk-active':'')?>
is the short notation of this:
<?php
if($page == 2){
echo "uk-active";
}else{
echo "";
}
here is my code i was just wondering how i can bring that image above the nav bar!
http://jsfiddle.net/Xb2UT/640/
apbook
<body>
<div id="logo00">
<img src="http://emojipedia-us.s3.amazonaws.com/cache/de/ca/decadd7edb6b1014ca0cb7a1afcb8ea3.png">
</div>
<header id="header">
<nav id="nav">
<ul id="ulnav">
<li><a id="test11" href="#two">Software</a></li>
<li><a id="test21" href="#three">Store</a></li>
<li><a id="test31" href="about">About</a></li>
<li><a id="test31" href="blog">Blog</a></li>
<li><a id="test31" href="careers">Career Opportunities</a></li>
<li><a id="test31" href="support">Support</a></li>
<div id="gay">
<li><button id="login-button">Login</button></li>
</div>
</ul>
</nav>
If you mean move the image in front of the header change the z-index on #header. If you mean move the image on top of the header increase the #header top value.
Im trying to get the following menu structure but I didn't find solution for it without a terrible hack in the core source of the knp menu bundle.
My output is at the moment:
<ul class="nav nav-list">
<li class="open">
<a class="dropdown-toggle" href="#">
Systembenutzer
</a>
<ul class="submenu" style="display: block;">...</ul>
</li>
</ul>
And I wanna get this:
<ul class="nav nav-list">
<li class="open">
<a class="dropdown-toggle" href="#">
<i class="icon-user"></i>
<span class="menu-text">Systembenutzer
<b class="arrow icon-angle-down pull-right"></b>
</span>
</a>
<ul class="submenu" style="display: block;">...</ul>
</li>
</ul>
I'm not able to set for the label the following tags < i >, < span >, < b >.
Is there any solution to get that working?
Notice that the structure posted above is required because there is a dropdown menu implemented with javascript.
If I understood well you need a new style for menu item. Why don't you define additional style as of
<style type="css/text">
.nav-list ul li >a {
font-style: italic;
/* options from yours class="menu-text" style */
}
.nav-list ul li:after >a {
/* options from yours class="arrow icon-angle-down pull-right" style */
}
</style>
it fits well if you'll change all view of . Also you could use
$menu->setChildrenAttribute('class', 'icon-user menu-text');
in your php menu definition
I'm trying to put in different <img> tags in each <li> generated by wp_nav_menu().
Meaning I want wp_nav_menu to generate this:
<ul id="main-menu">
<li id="menu-item-219" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
<a href="">
<img id="icon-one" />
Link One
</a>
</li>
<li id="menu-item-220" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
<a href="">
<img id="icon-two" />
Link Two
</a>
</li>
</ul>
Instead of this (the original output):
<ul id="main-menu">
<li id="menu-item-219" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
<a href="">
Link One
</a>
</li>
<li id="menu-item-220" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
<a href="">
Link Two
</a>
</li>
</ul>
So far I'm trying the $link_before parameter but its generating both of them at the same time, meaning its doing <img id="icon-one" /><img id="icon-two" /> in the middle of the <a> tag.
Now I'm looking at walkers, but I'm wondering if there's a clearer way to do it, and how?
I would probably go with a pure CSS solution and apply the image as a background image. So something like this:
#main-menu > li.menu-item:nth-child(1) > a {
/* 1st background image here */
}
#main-menu > li.menu-item:nth-child(2) > a {
/* 2nd background image here */
}
No need to mess with the PHP code for a simple display issue.
In WordPress menu admin, you can specify a css class for each menu item. This way you can use background-image css property to customize each menu item. The menu is then rendered like this :
<ul id="main-menu">
<li id="menu-item-219" class="icon-one menu-item menu-item-type-taxonomy menu-item-object-category menu-item-219">
<a href="">
Link One
</a>
</li>
<li id="menu-item-220" class="icon-two menu-item menu-item-type-taxonomy menu-item-object-category menu-item-220">
<a href="">
Link Two
</a>
</li>
</ul>
And you can do something like this for CSS :
#main-menu .icon-one {
background:url('../img/icon-one.jpg') no-repeat 0 0;
padding: 0 0 0 50px; // depending on your icon
}
#main-menu .icon-two {
background:url('../img/icon-two.jpg') no-repeat 0 0;
padding: 0 0 0 50px; // depending on your icon
}
NB : If you don't see the css option in the menu item admin block, check it in the option panel on top right.
I'm trying to create a custom accordion using jquery, have read through quite a few solution on stackoverflow but I just can't seem to get mine to work, I believe it has to deal with the .siblings. Anyway, here is my html code:
<div class="menu">
<ul>
<li class="current">
<img class="icon" src=""/>Dashboard
</li>
<li>
<img class="icon" src=""/>Mail
<ul class="submenu">
<li>
Write New
</li>
<li>
Junk
</li>
<li>
Deleted
</li>
</ul>
</li>
<li>
<img class="icon" src=""assets/colors.png""/>Child
<ul class="submenu">
<li>
Child 1
</li>
<li>
Child 2
</li>
<li>
Child 3
</li>
</ul>
</li>
<li>
<img class="icon" src=""/>Grid
</li>
<li>
<img class="icon" src=""/>Class
</li>
</ul>
</div>
And here is my jQuery code:
$('.menu ul li a').click(function() {
$(this).next('.submenu').siblings('li').slideUp();
$(this).next('.submenu').slideToggle();
});
The menu toggles open fine, but when I open one, the others won't close.
Thanks for your help !!
The reason why it won't close is because the siblings will look at the same level. So within the LI element it looks for more LI elements. You wan't the sibling LI's from the parent, and close there child .submenu.
Try this:
$(this).parent().siblings('li').find('.submenu').slideUp();
you're trying to close the one that you're about to open on the one that is currently open
$('.menu ul li a').click(function() {
$('.current').removeClass('current').next('.submenu').siblings('li').slideUp();
$(this).addClass('current').next('.submenu').slideToggle();
});
The whole code will be
$(this).parent().siblings('li').find('.submenu').slideUp();
$(this).next('.submenu').slideDown();
Just changed toggle to slideDown in last line....
I have one doubt ,every anchor will be clickable using user selector... can we make it only first level anchor clickable .any idea ?