Responsive Sticky Tabs - tabs

Couldn't find an answer anywhere... Is something like this possible.
2 Tabs:
When clicked it gets taller a little to show it is activated. And it has to stick.
Appreciate any ideas. Thanks
Tab 1Tab 2

Related

Wordpress page menu with scrolling ability

Firstly i must say i am a complete novice in programming! That said, i need some help regarding an issue that seems for me impossible to solve.
What i need is a menu that on a single page remains fixed in the same position, (i'm not that sure but the idea is similar to a sticky menu that wouldn't be at the top) from which it's possible to scroll down to each page section with an anchorlink. I tried to use "scroll to page id" but sometimes it gets stuck, or doesn't even scroll down and worst of all, once the page scrolls the menu is gone. image for reference.
I've been looking for days through plugins, stickymenus and other stuff but still haven't found the right solution. Any suggestions?
You can define your areas as sections instead of "page ids". After that is simple to navigate through those.
The Bootstrap Scrollspy is a nice way to do that simple: Bootstrap Scrollspy example

tabs/menu dropdown position not working

I am sorry in advance I could not get this to work in jsfiddle. I really am just not sure how to do it and I've spent way too long trying to figure it out.
Anyway I have this zozo tab (which no longer offers support) I am using HERE, When I make the window small for mobile size and click the "Overview" link that entire drop down menu goes under so there seems to be two "Overviews" instead of on top of it. Can someone please help me figure this out? I would great appreciate it!
CSS her HERE and HERE
JS for tabs is HERE

MDL: Fixed header icon misplaced?

I'm trying out Material Design Lite to make a nice-looking webpage for a school project. I'm having an issue where the sandwich icon in the header is off-center for seemingly no reason.
I copied and pasted the exact source from the fixed header example here (click the CodePen button to see the exact full source I'm trying) and it doesn't appear the way the examples do.
Is there something I'm missing? It's been a while since I've done HTML/CSS but I don't see why this would be happening. Could it even be a bug? Thanks.
I wish I could add a comment to help. Unfortunately my score is too low.
I went into the fiddle i believe you created and cut and pasted the info from the code pen. It looks like it is working. Please post the code you are using. Also you mentiono a fixed header but it looks like you are taking the header titled Scrollable Tabs. Correct?
I would be happy to help, i could imagine there is something in the CSS unless you're not using any of your own style sheets. #Jainam is on the right track by asking if you could set up a fiddle.

list based menu is flowing the the next line when zoomed in or out

Hi
I am trying to make a site with list based menu. It look the way I want but as soon as I zoom in or out the menu flows to the newt row. It's happening in every browser (but at different zoom levels.)
I have found few similar topics on this forum and tried using those solution. But nothing seem to be working.
You could have a look at the website yourself at www.empoise.com (the upper menu).
If you need any other info please let me know.
I have been trying to resolve it for last many months!
I would greatly appreciate any help.
Thank you
T
why don't you try this:
.span-13 {width:200px;}
.span-11 {width:730px;float:right;}
#header #menu {float:right;margin:0;padding:0;}

Get firexfox developer toolbar on a different tab or popout

I hope the question police have something better to do while I can get some much needed information.
I try to do my HTML and CSS on firefox using the Web Developer Toolbar addon. It saves a lot of time but I have a very simple question. I have searched all the options in the addon. Is there a way to get this thing to pop-out like firebug. Cause it takes up half the screen while doing the page and that becomes a pain really fast.
I know its a very simple question but if you can help me out, thanks!
I played around with it and it seems you are right. It doesn't have a "separate window/tab" feature. But here are two thoughts for what they're worth.
I assume you have dual monitors cuz of your question. There's a [position] icon next to the "Edit HTML" and "Edit CSS" tabs. (it looks like a lil window with a green arrow. Click on it to reposition the editor to the left or right of your browser, then minimize FF and stretch it across your monitors :D haha! but seriously, I tried it and it works perfectly!!
Lame answer: If that doesn't suit you, ask Chris Pederick on the WDT forum: http://chrispederick.com/forums/
Good luck!!