How do I fix this navigation bar?
I tried making it on my own but I just can't get everything to work.
This is the button in all three states:
The red background is #490000 and it should be a separate div.
The text on top of the buttons is a custom font but that doesn't matter in this case.
I've thrown together a working sample you could study. Can you elaborate on where you had issues so I can explain the solution?
Related
I am currently working on a little project and came up with a design for my bottom navigation bar (just a small personal project to learn).
Pretty standard bottom nav bar with two buttons left and then one reaching a little bit over.
First step was to to wrap my button into a div and push said div out. Next I wrapped that button in another div with a circle to create the „padding“. However, to create that „smooth“ curves from the bar to the padding was a challenge. I fiddled around with svg paths and was then able to put that svg together with the button into a div, push the svg out, then the button a bit.
However, I came across the fluid_bottom_nav_bar in flutter which seems to this flawless so I was thinking what better ways there are to achieve this.
Thanks guys.
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
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.
I need to show different Ionic lists in a tabbed menu. The problem was include those tabs with the slide option. So i found this: tabbedSlideBox.
Made it work, edited it's styling to go with my app. But I can't get the tabs menú to stay fixed and don't move.
I made a pen to show you my problem: http://codepen.io/anon/pen/qdjxrB
Line 21 you can see the style inline with the fixed property that doesn't work. It keeps moving with the content, which is the opposite of what I need, I need to be able to move the list up and down and the tab menu should remain in it's place, but it should be able to move to right and left.
I believe it has something to do with the translate3d, but I can't figure out how to solve it without breaking the whole thing.
Tried to modify it's directive but I ended up breaking it..
Hope someone can help me.
Thank you.
EDIT
I've been reading about fixed positioning and absolute3d transitions, and they don't get along, the fixed element behaves as it was absolute positioned because it takes it's container as reference for the positioning: http://codepen.io/markdebeer/pen/qrBDm, but if anyone comes with a solution to this i'll be grateful.
I'm using a background image for a submit button that I've using for a search form, and am trying to align the submit button/background image it so that it's vertically centered within the search input bar.
Check out the JSFiddle with my code to get a better idea of what I mean:
http://jsfiddle.net/XVx5A/3/
It aligns perfectly for FF and Chrome, but for some reason is stuck above the input bar in IE, and I can't seem to figure out why. Any advice on what's going on here and how to make this work in IE?
Note: I was originally using the image itself to submit the form, but do not want to go that way because of the automatic x & y coordinates messing up the clean url structure.
Thanks in advance for your help.
Floating the button and adding a fixed height to the search field normalizes positioning. Updated: http://jsfiddle.net/XVx5A/21/
You could also make the submit transparent and include the search icon as the text field's background.
Try to remove height:20px from .submit_search_icon. At least on Mac it looks better in Chrome.