logo
down
shadow

How can i make active background color for two elements in nav menu


How can i make active background color for two elements in nav menu

Content Index :

How can i make active background color for two elements in nav menu
Tag : html , By : James Lupiani
Date : November 24 2020, 05:49 AM

To fix this issue Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
  width: 250px;
  height: 50px;
  text-align: left;
}

.menu__item.active {
  background-color: #e9ebfd;
}

.menu__item.active .menu__icon {
  background-color: #e9ebfd;
  border-left: 4px solid #2c39ec;
}

.menu__item.active .menu__title {
  background-color: #e9ebfd;
}

.menu__item a:hover {
  text-decoration: none;
}

.menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #fafafa;
  color: #2c39ec;
}

.menu__title {
  display: inline-block;
  padding-left: 20px;
  color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
  <ul class="menu__list list-unstyled">
    <li class="menu__item active">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-tachometer-alt"></i>
        </div>
        <div class="menu__title">Main Dashboard</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-user"></i>
        </div>
        <div class="menu__title">Profile</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-bell"></i>
        </div>
        <div class="menu__title">Finances</div>
      </a>
    </li>
    <li class="menu__item">
      <a href="#">
        <div class="menu__icon">
          <i class="fa fa-calendar"></i>
        </div>
        <div class="menu__title">Titles</div>
      </a>
    </li>
  </ul>
</nav>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Tag : html , By : user126922
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further You would need to add a CSS class on the active page. Here i added class="active"
a:hover,
a:active,
a.active {
  background-color: #7A991A;
}
<ul>
  <li>
    <a href="/home.php" class="active">Home</a>
  </li>

  <li>
    <a href="/news.php">News</a>
  </li>
  <li>
    <a href="/contact.php">Contact</a>
  </li>
  <li>
    <a href="/about.php">About</a>
  </li>
</ul>
<ul>
  <li>
    <a href="/home.php">Home</a>
  </li>

  <li>
    <a href="/news.php" class="active">News</a>
  </li>
  <li>
    <a href="/contact.php">Contact</a>
  </li>
  <li>
    <a href="/about.php">About</a>
  </li>
</ul>

How can I make table row background color override cell input elements background color?


Tag : html , By : Lee KW
Date : March 29 2020, 07:55 AM
To fix the issue you can do When a user clicks the table row, I apply the following class to the row , apply this one
tr.selected td {
    background-color:#FFA76C !important;
}

jQuery - A different background color for each item when active in a sticky menu


Tag : jquery , By : Florian D.
Date : March 29 2020, 07:55 AM
this will help I have an answer, though I am still struggling to make this fit DRY programming techniques:
I've updated the JSfiddle to reflect these changes https://jsfiddle.net/ym88etuk/36/
<ul class="sticky">
  <a href=#part1 class="scroll">
    <li>part1</li>
  </a>
  <a href=#part2 class="scroll">
    <li>part2</li>
  </a>
  <a href=#part3 class="scroll">
    <li>part3</li>
  </a>
  <a href=#part4 class="scroll">
    <li>part4</li>
  </a>
</ul>
<div class=content>
<div id=part1 class="section gray">
</div>
<div id=part2 class="section green">
</div>
<div id=part3 class="section gray">
</div>
<div id=part4 class="section green">
</div>
<div class=extraspace>
</div>
</div>
</div>
.sticky{
  position: fixed;
  top:0px;
  width:100%;
  z-index:999;
  background: white;
  margin:0;
}
.content{
  position:relative;
  top: 28px;
  width:100%;
}
ul{
  list-style-type:none;
}
li{
  float: left;
  width 20%;
  padding:2.5%;
}
.section{
  height:300px;
}
.gray{
  background-color:gray;
}
.green{
  background-color:green;
}
.blue{
  background-color:blue;
  color: #fff;
}
.orange{
  background-color:orange;
  color: #fff;
}
.pink{
  background-color:pink;
  color: #fff;
}
.purple{
  background-color:purple;
  color: #fff;
}
.clearfix:after {
    content: " "; 
    display: table; 
    clear: both; 
}
.extraspace{
  height: 400px;
}
//smooth scroll
jQuery(document).ready(function($) {
var greenback = 
    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html, body').animate({
      scrollTop:($(this.hash).offset().top) - 32}, 500);
    });
});

//Navbar Functions
$(document).ready(function() {
  var pos1 = $("#part1").position(); 
  var pos2 = $("#part2").position(); 
  var pos3 = $("#part3").position(); 
  var pos4 = $("#part4").position(); 
  $(window).scroll(function(){
    var windowpos = $(window).scrollTop();
    part1li = $("li", 'a[href="#part1"]');
    part2li = $("li", 'a[href="#part2"]');
    part3li = $("li", 'a[href="#part3"]');
    part4li = $("li", 'a[href="#part4"]');
    if (windowpos >= pos1.top && windowpos < pos2.top) {
            part1li.addClass('blue');
        } else {
            part1li.removeClass('blue');
        }
            if (windowpos >= pos2.top && windowpos < pos3.top) {
            part2li.addClass('orange');
        } else {
            part2li.removeClass('orange');
        }
            if (windowpos >= pos3.top && windowpos < pos4.top) {
            part3li.addClass('pink');
        } else {
            part3li.removeClass('pink');
        }
            if (windowpos >= pos4.top) {
            part4li.addClass('purple');
        } else {
            part4li.removeClass('purple');
        }
      });
    });

change wordpress navigation item menu background color on active


Tag : html , By : Nougat
Date : March 29 2020, 07:55 AM
may help you . hello i am trying to change the background color of my menu item when ever a page is active or selected, i tried it the normal way using css, this what i have tried

How to change the color of the active background of the dropdown menu (i.e. tk.Listbox) in a ttk.Combobox


Tag : python , By : Stephen Judge
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , You are trying to use the correct option to make the background color change:
c.master.option_add( '*TCombobox*Listbox.selectbackground','red')
c.master.option_add( '*TCombobox*Listbox.selectBackground','red')
Related Posts Related QUESTIONS :
  • Tinted background image not working with Bootstrap
  • How can I stop my parallax div having a blurred background?
  • CSS hover effect to modify another element is not working
  • why section-testimonial is not placing correctly
  • Why doesn't my media screen query work, I can't make my website responsive?
  • Aligning inline-block elements horizontally
  • How do I display TypeScript code in "<code>" tags in an Angular app?
  • How can I change the color of input tag in a form when focusing on it?
  • How do I put a container in a fixed position with its own overflow?
  • How to fix text-alignment
  • Outlook not displaying a portion of HTML
  • Remove radio button text only with CSS
  • How to use "v-if" in Vue.js to render a <span> only if parent div has a specific property?
  • How to Extract just the Date from Angular Material Datepicker
  • @keyframes not working, I have tried everything i can think of
  • Bootstrap fix form to bottom of the page
  • How to hide a list element in html
  • How to stop repeating image
  • How do I prevent the GET method from encoding HTML special characters in the URI?
  • CSS/HTML: How do I change the color of the check mark within the checkbox input?
  • attaching a file path in a html form
  • Flip <canvas> (rotate 180deg) after being published on page
  • Is there an application I can show a client the speed of their site via differring internet connections?
  • Html / Email / Distribution list problem from a noob
  • Inspiring web experiments and technical demos
  • Can I load javascript code using <link> tag?
  • Lisp-style quotation in HTML
  • How to put text float around image like some newspapers' format using CSS?
  • Technical reasons for not having large background images in websites
  • HTML 5 Structure tags demo
  • Angular - String interpolation of undefined variable
  • Is there any way to edit specific Column of table using mat-table in Angular material
  • How can I set a text as a shadow for a heading element?
  • How to fix the forms making the buttons overlap
  • Splitting XML into multiple HTML pages with XSLT?
  • How to justify empty divs in flex container
  • How to blur in CSS only one layer of when you have multiple layers in background-image?
  • Scrollable html table with fixed first row and first column, along with angular material controls within the cells of ta
  • In Django, how to extract ID attribute from html Input tag, WITHOUT using django forms
  • how to fix link tag in html after changing css
  • How do I add a top padding to the second row?
  • Is it possible to split XML into multiple HTML pages with page navigation?
  • AngularJS: responsive height in bootstrap
  • Hide second line of text with CSS
  • repeating-linear-gradient not working in Edge browser and internet Explorer Browser
  • how to make search and form category merges like amazon on bootstrap
  • Bootstrap: Rearranging rows into columns and changing the order of elements
  • How can I move a label under a text box?
  • How save LinearGradient To database
  • How to reposition an image with a linear gradient using css?
  • HTML audio will not play when page opened by batch file
  • CSS Three Tone Diagonal Background
  • How to use slots inside of template components in HTML
  • Using span tags in meta description & title, for dual languages
  • How to make an icon/span selectable by pressing Tab key?
  • Add dynamic margins using UI Kit
  • Add margin-top to textbox
  • What is the correct semantic HTML markup for a title (book, movie, etc.), according to the spec? Is it an <em> tag
  • How to make an animation in Geoserver or in Leaflet
  • Buttons overlapping when shrinking window
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com