I'm encountering an issue while trying to create a webpage in Angular 6. The content displays correctly when I write the code in NOTEPAD as normal HTML, but it doesn't work as expected when implemented in Angular. I am new to Angular and struggling to identify the cause of this problem.
menu.component.css :
body {
position: relative;
height:100%;
}
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section5 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.logo{
height:20px;
width:100px;
}
.imgsize{
background-position: fixed;
height:70px;
width:120px;
margin-top :10px;
margin-bottom:20px;
}
.bg1{
background-position: center ;
background-repeat: no-repeat;
max-width:100%;
height:50%;
background-size:100% 100%;
}
.center{
position:absolute;
top:50%;
left:60%;
transform: translate(-50%,-50%);
}
.text{
position:absolute;
top:60%;
left:68%;
transform: translate(-50%,-50%);
}
.gs{
max-height:40px;
max-width:50px;
}
.exp{
max-height:40px;
max-width:90px;
}
.ap{
max-height:50px;
max-width:100px;
}
While the header image and layouts are functioning correctly with other img sources, the main issue lies with the navbar implementation.
menu.component.html
[HTML code for menu.component.html]
The same code works well when written in NOTEPAD. This issue seems to be specific to the Angular implementation. I'm seeking assistance in pinpointing the cause.