Is it possible to have a liquid navigation bar with the links having images. I am trying to have a responsive link with an image on the left and text on the right. If the size of the window changes then the button (link) will change size too. I would prefer to do this with CSS.
What I have tried so far is to have the following:
<div style="height:62px;margin-left:60px;border:solid 1px #FFFFFF;">
<ul class="main_nav">
<li>
<a href="#me">
<img src="img/avatar/me.png" alt="me">
Me
</a>
</li>
<li>
<a href="#guide">
<img src="img/avatar/spotlight.png" alt="guide">
Guide
</a>
</li>
<li>
<a href="#downloads">
<img src="img/avatar/downloads.png" alt="downloads">
Downloads
</a>
</li>
</ul>
<div>
Related
I am using beercss and alpinejs I need did dropdown menu, but it's width is smaller than it's context.
<nav class="wrap">
<div class="tabs right-align">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a x-data="{ active: false }">
<button #click="active = !active">
<span>Login</span>
<div x-show="active" class="dropdown">
<a>
<label>Complementary text</label>
</a>
</div>
</button>
</a>
</div>
</nav>
How to fix it?
https://codepen.io/bubnenkoff/pen/VwMmEgb
Because your button is on the right, the dropdown disappears outside of the visible area. According to the docs you can use the class list "dropdown left no-wrap" to position the dropdown ("left") and have the width based on the content ("no-wrap").
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>
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 was asking if the following is possible. I have a HTML5 article tag, with inside that a figure and figcaption tags. The caption is overlapping the image. The figure should be clickable, but I want some other links in the caption that linked to another page, like a categorie page.
How should my markup looks like.
Now I have the following, but than the a first a tag will be immediately closed after it's opening the a tag.
<li class="grid_12 blog-post">
<a href="#">
<figure class="post-thumb">
<img src="images/blog-thumb.png" alt="Post thumbnail">
<figcaption class="entry-post">
<span class="capitalize">Entry</span>
<h1 class="entry-title">
Fris. Responsive. Retina Ready.
</h1><!-- End h1 .entry-title -->
<ul class="entry-meta">
<li class="author">
By Casper Biemans
</li>
<li class="published">
On September 1, 2012
</li>
<li class="entry-categories">
In Digital Art
</li>
<li class="comment-count">
With 22 Comments
</li>
<li class="permalink">
<img src="images/permalink_icon.png" alt="Permalink post">Permalink
</li>
</ul><!-- End ul.entry-meta -->
</figcaption><!-- End figcaption.entry-post -->
</figure><!-- End figure.post-thumb -->
</a>
</li><!-- End li.grid_12 blog-post -->
My problem
I am using Bootstrap 3.0 and need to use a fixed navbar, which will stay at the top of a DIV on the left side and NOT extend all the way 100% of the width of the window (like I usually see Bootstrap's example do). I have some very simple code below, using ASP.NET MVC 4 which will explain the RenderSection areas.
I have included an image which shows what I am trying to do. Currently the navbar is only extending about 75% of the left side container, not the full 100% of that left side container like I want it to.
Like I said above, I want the navbar to be fixed so when you scroll it stays in one spot within that left DIV.
Any tips/hints would be greatly appreciated! Thanks!
I also saw this question (Navbar fixed to top but not full-width) but I do not want to have to dynamically maintain this navbar with a fixed pixel width in media queries. I'd prefer it to fill out the entire left side DIV that contains it.
(http://i.imgur.com/YLzmkHp.jpg)
My code
<div class="container">
<div class="row">
<!--LEFT SIDE-->
<div class="col-md-9">
<div data-spy="affix" data-offset-top="0">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
</nav>
</div> <!--end data-spy=affix-->
<!--the LeftSide below just contains basic placeholder text in a <p> tag-->
#RenderSection("LeftSide", true)
</div>
<!--RIGHT SIDE-->
<div class="col-md-3">
<!--the RightSide below just contains basic placeholder text in a <p> tag-->
#RenderSection("RightSide", true)
</div>
</div>
</div>
Partially Solved (update)
I was able to solve my main problem that I listed above by using this bit of jQuery
$(window).resize(function () {
var w = $("#leftSide").width();
$("#navWrapper").css("width", w);
});
But this does not work within an iFrame.
If anyone has any insights on solving this for use in an iFrame, it'd be greatly appreciated.
Have you tried placing your navbar and main content area in one column and then your right sidebar in a column by itself? Then add a bit of CSS to correct for the navbar position and adjust for responsiveness.
LINK: http://www.bootply.com/ZJCGxiUD6g