navigation bar isn't responsive

By -

This is my HTML and CSS code I want to make the navigation bar responsive but the media query doesn't cooperate It doesn't make any difference. and #menu doesn't make any difference in the first place(display: none doesn't work) it also doesn't work under media query. I can't figure out why, please help me.

.header .icons a {
cursor: pointer;
font-size: 2.5rem;
color: #333;
margin-left: 1.5rem;
}

header .icons a:hover {
color: var(--pink);
}

#menu {
display: none;
}

.header .search-form {
position: absolute;
top: 115%;
right: 7%;
background: white;
border-top: #333;
width: 50rem;
height: 5rem;
display: flex;
align-items: center;
transform: scale(0);
transform-origin: top;
}

.header .search-form input {
height: 100%;
width: 100%;
font-size: 1.6rem;
color: pink;
padding: 1rem;
text-transform: none;
}

.header .search-form.label {
cursor: pointer;
font-size: 2.2rem;
margin-right: 1.5rem;
color: #333;
}

.header .search-form label:hover {
color: var(--pink);
}

@media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}

@media(max-width:768px) {
#menu {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100px;
right: 0;
background-color: #333;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a {
color: rgb(243, 215, 215);
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- 
scale=1.0">
<title>jj </title>
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header" >
<a href="#" class="logo">
<img src="images/logo.jpg" alt=""></a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#varieties">varieties</a>
<a href="#about us">about us</a>
<a href="#contact us">contact us</a>
</nav>

<div class="icons">
<a href="#" class="fas fa-bars" id="menu"></a>
</div>
<div class="search-form">
<input type="search" id="search-box" placeholder="search">
<label for="search-box" class="fas fa-search"></label>
</div>

I have used meta in the head and I've added the header but it still doesn't work



Comments

Post a Comment

Popular posts from this blog

Spring Elasticsearch Operations

By -
Elasticsearch Operations Spring Data Elasticsearch uses two interfaces to define the operations that can be called against an Elasticsearch index. These are ElasticsearchOperations and ReactiveElasticsearchOperations. Whereas the first is used with the classic synchronous implementations, the second one uses reactive infrastructure. The default implementations of the interfaces offer: Read/Write mapping support for domain types. A rich query and criteria api. Resource management and Exception translation. ElasticsearchTemplate The ElasticsearchTemplate is an implementation of the ElasticsearchOperations interface using the Transport Client. @Configuration public class TransportClientConfig extends ElasticsearchConfigurationSupport {   @Bean   public Client elasticsearchClient() throws UnknownHostException {                      Settings settings = Settings.builder().put("cluster.name", "elasticsearch")....
Read more

Object oriented programming concepts (OOPs)

By -
Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects". Re-usability is the main concept of Oops. There are few major principles of object-oriented paradigm. If any programming Language supports this principles that programming language called Object-oriented programming. Below are object oriented programming concepts : 1. Object        Read More about Object     http://theprogrammersfirst.blogspot.in/2016/07/java-object-concept.html
Read more

Spring Boot and Vaadin : Filtering rows in Vaadin Grid

By -
Adding a text field for filtering: Start by adding a text field above the grid. Remember, MainView is a VerticalLayout, so you need to add the text field before the grid. MainView.java public class MainView extends VerticalLayout {   private ContactService contactService;   private Grid<Contact> grid = new Grid<>(Contact.class);   private TextField filterText = new TextField(); ①   public MainView(ContactService contactService) {   this.contactService = contactService;   addClassName("list-view");   setSizeFull();   configureFilter(); ②   configureGrid();   add(filterText, grid); ③   updateList();   }   private void configureFilter() {   filterText.setPlaceholder("Filter by name..."); ④   filterText.setClearButtonVisible(true); ⑤   filterText.setValueChangeMode(ValueChangeMode.LAZY); ⑥   filterText.addValueChangeListener(e -> updateList()); ⑦   }   // Grid...
Read more