Angular4 - Bootstrap Line Tabs - css

https://bootsnipp.com/snippets/featured/bootstrap-line-tabs-by-keenthemes
I'm new to Angular and so my work has set me a beginner's challenge to modify their basic navbar menu.
I've chosen the menu in the link provided. However, the difference with my menu is that the pages linked are separate HTML files which Angular displays
in the router-outlet below.
When you click a tab the correct page displays but the active tab does not change (the first tab remains highlighted.)
Is this problem caused by my lack of knowledge of Angular or CSS??
Is it possible to get the navbar properly working within this Angular environment?
All feedback much appreciated. Thanks.

Related

Navbar with tabs in angular

Can someone tell me the best way to make a navbar in angular with tabs. The point is that it does not transfer to other subpages only after clicking on the tab a specific component is displayed. I will need it for an extended form. I don't want a separate path because the data can't disappear you need to be able to navigate between the data to fill.
Use angular material stepper, you can switch between tabs.
https://material.angular.io/components/stepper/overview

React-admin: how can i fix this view disaster?

I am a frontend developer and I am working on a web app project using react-admin.
The code is fine, no errors. I launch the app. At first it looks the way it is supposed to look. A few components with tables, menu bar, etc. However, after a few clicks the view goes bunkers. Elements that should be at the top go to the bottom, elements disappear, there are boxes with shadows around elements. The view gets squished, a total disaster!
Can anyone give me any suggestions about what might have caused it and how to fix this issue?
Remove material-ui from your dependencies. You have to use just the material-ui version that comes from react-admin(1.4.0) because the CSS classes from the latest versions of material-ui(>2.0.0) clash with the internal react-admin components.

Burger menu from wordpress template

I'm just starting my programming but I need help.
I built my site from wordpress template. Made a lot of customization on my own but I have trouble by creating BURGER MENU on mobile devices.
I'm not sure how I can rewrite chosen template navigation bar menu to burger. Let me know if anyone could help me.
You could do it a few different ways, but personally, it's easier to place it with javascript and hide it with css...
Usually, you would create an element with javascript and attach it to a location on your page. For the burger itself, you've got the option of using drop-shadows, three divs or the unicode character for it. You can read more about those options here: https://css-tricks.com/three-line-menu-navicon/
Finally, if you want to add animation to your menu items (for opening / closing ) here's something that you can read to understand how it's possible to achieve: https://jonsuh.com/hamburgers/

Styling AngularJS ui-router navigation tabs

I am rewriting an app using AngularJS. The tabs have a certain styling that I don't want to change. But upon using ui-router, specifically replacing "href" with "ui-sref", the look of navigation tabs gets messed up because I think the JavaScript and CSS is defined for "href".
I tried replacing all instances of href with ui-sref but that didn't work.
I've looked into Bootstrap but I need to render new pages upon clicking the tabs, not display data already on the page but hidden. Like Bootstrap does.
Can someone please suggest me what to do? How to modify the current styling or maybe suggest some other css template that I can use only for the navigation tabs? Thanks in advance!

css dropdown menu appears at the first tab

I am staging my ongoing work here-
http://www.22shrutiharmonium.com/version2/index.html
Here, css dropdown menu appears at different menu tabs (and functions accurately as intended). However, once inside the "blog" section, notice the dropdown menu unnecessarily also appearing near the first menu tab, no matter where we hover the mouse over the menu. (IE7, FF3.6.9, Chrome 6.0.472.55)
Basically, I have integrated the external open source blog code into my site and have changed the original blog theme (css) with that of my site. So the dropdown menu part of the css of my site and that of the blog are same (I have copied the dropdown menu part of my css into /blog directory for customizing its css).
Thanks in advance.
To avoid headaches, I would personally recommend using CSS-only menus, if it is not too much time or effort to re-do a few lines of the CSS.
http://htmldog.com/articles/suckerfish/dropdowns/
You can ignore the sf-hover if you aren't concerned about supporting IE6. It also looks like the structure of your current navs matches that the above link, so the process should go pretty smoothly.

Resources