How to overwrite mdb.css values?

web
mobile

Topic: How to overwrite mdb.css values?

marioqtanjr pro asked 3 years ago

Hi, I have a "search" textbox in my navbar to have its own customized UI. How can I overwrite it in my own css file? Thanks!

Marta Szymanska staff pro premium answered 3 years ago

Hello, Could you specify what exactly would you like to overwrite? E.g. Paste some screen and describe the problem? Then I will try to help you. Best, Marta

Chris Sweeney pro commented 3 years ago

Hi Marta I have the same issue on <a href="http://www.rotary-ribi.org/clubs/homepageV5.php?ClubID=1103" rel="nofollow">http://www.rotary-ribi.org/clubs/homepageV5.php?ClubID=1103</a> I'd like the search box in the navbar to be the default white box, with the magnifying glass. Hope you can help   (BTW - the option to subscribe to this thread doesn't appear - the word 'subscribe' does, but no checkbox) Cheers Chris

Marta Szymanska staff pro premium answered 3 years ago

Hi,
I'm not sure how exactly your search form would look, but maybe you mean sth like this:
CSS:
<style type="text/css">
input[type=text] {
width: 130px;
height: 46px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 50%;
}
</style>

HTML:
<!-- Main navigation -->
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark indigo">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<input type="text" name="search" placeholder="Search..">
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
</header>
<!-- Main navigation -->

Best,
Marta


Chris Sweeney pro commented 3 years ago

Thanks Marta - you're a star! Cheers Chris

i am unable to overwrite our mbd code for form button how can this will be possible for me


i want to give a different desing for form button but i am unable to overwrite this mbd bootstrap code please give me suggestion and please resolve this problem immediately


Marta Szymanska staff pro premium answered 2 weeks ago

Hi,

you can do it by using the Gulp version of the MDB package with SCSS files.

Best, Marta


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No