I have a header navigation with kinda difficult hover effect.
In order to make it dynamic and NOT hard-coded, I'm gonna have to use spans inside list elements or even better I'm gonna need entire navigation done using DIVs.
Is there a way to edit the wordpress function wp_nav_menu() (codex definition)
so that it will give me divs that I want instead of ul-li hierarchy?
Another solution is to build it the common way but then append spans to it using jQuery. But that's my last resort.
Has anyone had similar experiences?
Thank you
Edit:
instead of
<ul>
<li>...</li>
<li>...</li>
</ul>
I'm gonna need:
<div class="x">
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
<div class="y">
<div class="z">
</div>
</div>
</div>
You need to use a custom menu walker. See http://codex.wordpress.org/Function_Reference/wp_nav_menu and http://www.mattvarone.com/wordpress/cleaner-output-for-wp_nav_menu/ and other Google results for "wordpress menu walker"
Related
I did a thumbnail with some images . I'm using bootstrap.
Below each image I want to put a title .
The problem is when the title is large, it breaks to a second line , making the thumbnail become disorganized .
here the what issue
https://s17.postimg.org/v4116i54f/pic.png
anyone know how to fix this?
<div class="col-lg-3 col-sm-6 videoitem">
<div class="b-video">
<div class="v-img">
<img src="http://domain/cover/7604.jpg" class="img-rounded" width='270' height='169' alt="">
<div class="time">3:50</div>
</div>
<div class="v-desc">
<a href=".html" >title</a>
</div>
<div class="v-views">
27,548 views. <span class="v-percent"><span class="v-circle"></span> 78%</span>
</div>
</div>
</div>
You have two possibilities here:
Either force one-line titles with height, overflow and text-overflow
Or clear the floats after every 4 items using some kind of clearfix
If you are not much concerned about browser support you can also try Bootstrap 4 which implements grid using flexbox
You can add a min-height for the title or you can use to -webkit-line-clamp: 2;like this answer https://stackoverflow.com/a/13924997/7565713
Does anyone can create a JSfiddle code to demonstrate how to integrate two or more anchor tags in the same li item? I have searched but no clear answer of how could you for instance divide the li element with lets say 3 square anchors 1/3 each. Do you for example need to add div tags to each anchor?
eg.
<ul>
<li>
</li>
<li>
</li>
You can use the jQuery Mobile grid:
http://demos.jquerymobile.com/1.4.5/grids/
e.g.:
<li>
<div class="ui-grid-b">
<div class="ui-block-a">
<img src="http://lorempixel.com/80/80/food/1/" />
</div>
<div class="ui-block-b">
Some text
</div>
<div class="ui-block-c">
Delete
</div>
</div>
</li>
Here is a simple DEMO
NOTE: you can then use CSS to tweak widths, margins, padding, etc. to taste.
Let's say, as you asked, you have 3 elements:
<div class="your_three_elements">
<img src="..." alt="..." />
Your Text
Your Button
</div>
So you have to have one link per one target. But those things aren't anchors. An anchor would be something like this:
<div class"your_anchorlink">
Your Link
</div>
<div id="gototext">
When you click on the link, you will get to this text (which is on the same page).
</div>
You could combine that by having a link go_to_some_page.html#gototext which will open the go_to_some_page page and jump to the id gototext.
But maybe I am missunderstanding what you want to do.
I am working on a site using Zurb Foundation. The content will be rendered differently based on the size of the screen. If the content is being viewed on a phone, the navigation structure will use a off-canvas nav item for example. To demonstrate, here is a fiddle: http://jsfiddle.net/LFUvM/5/.
In my example, you can see that there is
Content Goes Here
My problem is, I don't want to write the actual content three times in my HTML. Some of my content is quite large. Is there a way to a) share the content across all three views b) still use the off-canvas nav option?
THank you!
I made an example using <section role="main"></section> after <a class="exit-off-canvas" href="#"></a>
You can take a look at it here
If it's possible to restructure the HTML a bit you can achieve this with the following setup:
<div class="off-canvas-wrap show-for-small-only">
<div class="inner-wrap">
<nav class="tab-bar show-for-small-only">
<section class="tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
</div>
</div>
<div>
<h1 class="show-for-small-only">Phone</h1>
<h1 class="show-for-medium-only">Medium</h1>
<h1 class="show-for-large-only">Large</h1>
Content Goes here
</div>
And here's the working jsFiddle.
I've boiled my layout down to this fiddle or the full screen version
I am having two problems. The first, is that space between the side bar and the content is very large. I want them to be spaced as normal. In my case, I'm expecting the side bar to be span2 in size, my main content to be span7 in size and then a right hand column to be span3.
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav-fixed">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
...other links ...
</ul>
</div>
</div>
<div class="span7 span-fixed-sidebar">
<div id="world-map" style="display:block;"> </div>
</div>
<div class="span3">
<div class="row-fluid">
<div class="span12" id="country-info">
<h2 id="country-info-header">
The Detail Header
</h2>
<p id="country-info-summary">
A set of summary information. A short paragraph of text.
</p>
</div>
</div>
</div>
However, I'm getting a result with a huge gap between my sidebar and my content (the red box), and the right hand content is on the left hand side and under my sidebar. How can I fix this layout?
You need to experiment with Bootstraps offset classes. I made you a quick example here:
http://jsfiddle.net/tXzjX/5/
Your position:fixed takes the element out of the natural flow of the page, and in a way "resets" the columns on the grid. Using Bootstrap's offset classes can counteract that issue. Check here: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem under "Offsetting Columns".
Could you not just reduce the margin size like so:
.row-fluid > .span-fixed-sidebar {
margin-left: 100px;
}
as that seems to move the red bar in nicely
EDIT: I have had a play about and come up with a slightly simpler looking code with what I think is the effect you require with a bit of tweaking. http://jsfiddle.net/bmgh1985/UeFRa/
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.