I'm having issues with handling Foundation on my Rails application. They are mostly related to customizations and few navigation structures.
In my assets folder I have application.css.scss and framework_and_overrides.css.scss as overriding styles which is imported in my application.css.scss and I also import "foundation" in it.
I understand the default structure of top-bar, but however I'm failing to build a two level responsive navigation as depicted in mockup:
First of all, it is difficult to change sizes, links and background color. Is there any easy way to do customization than inspecting or modifying each element?
Can I make one nav bar in two rows, every list element in this section falls under toggle, and I need to keep the language navigation bar outside the toggle and intact. If I make two separate navbars - when resizing the screen, the language one falls under the second one because all the buttons stack over. I don't think a good solution would be to override both nav bars in different ways, I hope it's not the only one.
What is the best way to make such responsive navigation?
Thanks for any help and guidance.
Have you considered using the Top-Bar and the Icon-Bar -: http://foundation.zurb.com/docs/components/icon-bar.html together? That way you could just have styled the Top bar one way and the icon bar another. Asides from the colors it looks almost exactly the same as your mock-ups.
You can do this by using CSS media tag. See this http://jsfiddle.net/8cqgumhw/
Related
I do a lot of work during the day and I program in quite a few languages so doing CSS work is a little tough because i don't specialize in it. I have run into an issue where wordpress no longer works for me so I have to do mysite on my own. can you guys point me to a web resource that will show me how to get a a look of a multi-level horiz. menu at the top of my homepage similar to the one found here?
https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
I got that link from a similar thread here on S/O.
I copied all of the code there and put it in the appropriate CSS and HTML files, but I do not get the multi-leveledness. I only got a vertical menu on the left side without color. I'm a source coder, and generally automate things and I'm horrible at designing anything. I draw stick people and that's as far as my artistic talent goes. so CSS falls into that same boat. thanks!
If you really only got a vertical menu on the left side without color, that sounds like none of the CSS styles are actually taking effect. And since none of the elements have classes from what I can see, it sounds like your CSS isn't actually loading or being applied to the DOM. How have you included the CSS rules into your website? Before trying to use a different demo, try to get this specific one working by looking at your HTML structure and figuring out how to get the styles to grab onto the right elements...
I'd like to change the position of menubar from top to left on tvOS.
With Menu Bar Template, can we change the position of menu bar by for example changing the style of it?
I've looked over the TVML Styles of Apple's document, but I couldn't find anything about changing the position of menubar.
If I cannot change it with Menu Bar Template, I'm thinking to try to use UIKit instead of TVML Template...
I appreciate any comments for it.
Correct, you can't change the position of the menu bar, Apple is trying to keep the UI the same all over the Apps. Which is good for your users.
You should probably look into other templates that have a vertical layout, like the stack template, or paradeTemplate which probably makes more sense in your use case.
But the worse case you can create your own with tvinterfacefactory with native code.
I am Trying to find out the "correct"(best practice) way of creating toggleable sidebar with bootstrap 4. Gone through the examples on the internet and not so sure if those were so good...so If someone can send me related resource links ,it would be great so that I can analyze it.
-I am from android platform so I'm a newbie when it comes to web development but I'm trying to achieve that kind of sidebar like on this side: link -notice: sidebar doesn't change its width(stretching) while changeing the size of a browser -until a point when it jumps over to icons width.
Bootstrap does not have an "official" sidebar implementation so nothing is "correct" here. As long as it works cross-browser/cross-device, anything is good to go.
Regarding the sidebar implementation itself, there are various options:
opens above the content,
pushes the content to the opposite side
squeezes the content
The above options and the array of animation possibilities for:
the sidebar itself,
the menu item containers,
the menu names/labels
and the menu icons...,
...make any attempt at providing an example prone to subjective preference and would render your question off-topic.
Other possible features are
auto-open above certain width,
auto-close below certain width,
reordering of elements,
three-state (full, min and off).
But on topic, the only objective answer to your question is: there is none (official).
As a starter, you might want to take a look at this simple sidebar. It works prefectly fine with v4. Just import the simple-sidebar.css and adjust the calls to match your project's elements.
In the end, the sidebar is all about two containers and applying a class (plus, ideally, some aria- attributes for screen readers). What you put in those containers and how you adjust the contents to look in each element state is all about your own (or the designer's, or the client's) personal preference.
Lets say I had just made an awesome looking picture I intend to use as a navigation bar. I exported it as a jpg and now I need to make the actual navigation bar.
I originally thought of image mapping but that's like ancient and does not support drop down menu's. I googled around and I still couldn't find an answer. How do I use one photo as my navigation bar?
Thanks in advance
You can use the technique of CSS sprites; setting your awesome picture as background-image for your menu headings, and using background-position to display the appropriate part of the picture in each heading.
Getting this to be pixel-perfect may require an amount of experimentation and patience.
Hello I am trying to fix the look of this site my original site was this
http://graydaddy.com
but know that I integrated it with the grou.ps community platform the nav menu gets messed up and the image gets moved down by a bit.
I have been looking at it for a while but cant seem to find the error especially because I did not modify at all the div that contains the nav menu
here is the modified
http://www.graydaddy.com
This is probably a dum mistake by my part but thanks for any assistance
I think I know what your problem is. Each navigation image is a different height. And because there are no styles applied to the table cells, the inconsistent image sizes are throwing off the spacing between the horizontal line rows and the image rows.
If it's possible, redo this navigation with an ordered list, and text as HTML text, not image text. Using images as navigation in the way that your site does, is very bad practice.
If it's not possible, re-create each image to be the same exact height.
*Edit: it just dawned on me, you probably used some sort of online GUI editor to create this navigation, if that's the case, there is not much I can help you with as I am not familiar with the Grou.PS. But you'll probably have to redo the navigation to be more precise
Thanks