youtube mobile style navigation with jquery mobile - css

I currently using jquery mobile and want to achieve the top navigation as youtube mobile with 2 icons at the right side (picture below)
So i try using this code below, but only one icon appeared.
<h1>Youtube Mobile</h1>
Menu
Search
Anyone can help me solve this problem? Thanks

Both buttons are there. They are just being absolutely positioned one on top of another. Add the class 'grid' to your grid button. Then use .grid.ui-btn-right{right:30px;} to position your grid just left of search button. Here is a fiddle demonstrating this http://jsfiddle.net/codaniel/JMKss/1/

Related

Top Navigation Menu is not visible in mobile view using GeneratePress premium

I am using the Generate Press premium theme My issue is simple but not able to troubleshoot yet. Top navigation on the header of the website is not visible when it collapses to the mobile view.
https://www.wowkitchenplace.in/
images
http://prtsc.ca/i/5wveSi ,
http://prtsc.ca/i/5wv0H2
I have no idea how to solve it. Please help me!
Thank You
Isn't there a hamburger icon (3 horizontal stripes) in your mobile view? I can see it when I minimize the page.

How can I achieve this 'WOW' scrolling effect

A client of mine saw this awesome scrolling effect when clicking on a menu item: http://www.feedmusic.com/
I'm talking about the grey/purple overflow between the two anchor menu items.
I've been Googeling around for hours and can't find anything like this. Does anyone know how to achieve this?
Thanks in advance!
It's singlepage application with disabled scrolling. I haven't experience with singlepage, but here are ideas which looks like it could work:
Create two divs between content one gray and second purple (or one with two colors in the background). Then create scrolling via js (jquery) on button click.
If it's ajax loaded, there could be only 3 divs: one with current content, one with gray/purple background and third with new content and js should place the divs to required places. But first solution should be easier.
Implementation is up to you.

jQuery mobile: get navigation and search toggle position:fixed

I´m using jQuery Mobile and my navigation and search panel will slide from the left into the page. So the problem is, that something and I really don´t know what kind of element, is changing the position of the toggle so that it´s not fixed. I´ve defined already data-position:fixed; but that didn´t help.
How can I change the position of the jQuery Mobile toggles to position:fixed; so that they are over the div.ui-panel-dismiss ?
I know that jquery mobile uses translate3d to animate the panel. So if I put this out it will have the position:fixed; but the page will also stay behind the panel, so that is not a solution for me. But I think this question is like:
css3 transform reverts position: fixed

CSS: I don't have horizontal scroll but when I click and drag the page it goes left

I'm developing a website and on its home page I have some sliders.
When I use these sliders I used to get horizontal scroll. I managed to fix that using overflow-x:hidden; at the css for the body element.
My problem is that When I click and drag the page to the right the scrollbar doesn't appear, but the user have the same effect as if he was using the scrollbar.
I received the html/css from a third part front-end developer and I'd prefer not to have to modify his css much.
Would you have any tips to fix this behavior without having to do further changes in the html/css structure?
Thanks in advance for any help.

Manipulate CSS with javascript

RE:http://www.jorgemonedero.com/blog/index.php/portfolio/tamara-rojo-2/
I wish to move the close button (top right below social media icons) to the bottom line alongside photo title/publication and photo count. When I changed the css the button disappears behind a layer?
Someone mentioned I could do this with javascript?
Can anyone help?
Brians answer is pretty much the easiest way to go, or you could give your container #grid-gallery-wrapper a height and then it wouldn't cut off the close buttons when positioned.

Resources