I am trying to create a page with a search bar and filters underneath. I really like the way the search-toolbar looks, but it's creating space that I don't need. Is there a way to modify i to get rid of the space?
Thanks!
Here's an image of what I have:
Search bar with toolbar underneath
Edit: That grey space is what I'm trying to get rid of.
Here's my asp code:
<div class="search-toolbar" style="background-color:white">
<ul class="list-unstyled nav nav-pills">
<li>
Everything
</li>
<li>
Other Content
</li>
</ul>
</div>
<div class="tab-content">
Content
</div>
Figured it out, I found the css file and edited it.
I'm still new to web development, and I wasn't aware that I could do that.
Related
Thanks in advance for any help here.
I have a sandbox and a live site that I'm making some minor tweaks to. There's one section that I just can't figure out what's causing the issue. Photos below.
Inside a li there's menu items that have a title, description and price. In some instances there's no price for the item and when that field is empty in the CMS the lines style themselves differently.
Here is the way I want it to appear: Live Site: https://www.crownshy.nyc/menus/#cocktails
cocktails page non-alc with no prices
The following is the way it's populating on the sandbox: https://crownshy-sandbox.getbento.com/menus/#cocktails
Sandbox cocktails page non-alc no prices
There's really nothing special about the code here, which is why I'm a bit confused. I just need to take a break and come back with a fresh eye but hoping you all can speed this along. I'm happy to post the CSS but figure because it's several classes that it would be easier to look at it on the developer console
<section class="menu-section">
<div class="menu-section__header">
<h2>Non-Alcoholic</h2>
</div>
<ul>
<li class="menu-item">
<p class="menu-item__heading">No Mas</p>
<p>Pear, Citrus, Rose, Lemon, Yogurt</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Ginger Jammer</p>
<p>Ginger, Mango, Togarashi, Lime, Soda</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
<li class="menu-item">
<p class="menu-item__heading">Hojito</p>
<p>Hoja Santa, Lime, Tonic, Seasonal Herbs</p>
<p class="menu-item__details menu-item__details--price">
</p>
</li>
</ul>
</section>
On Sandbox the heading appears to be missing a width.
p.menu-item__heading {
width: 100%;
}
You put the style on span tag of on live site with this class name .menu-item__currency
You can use that class name or you can put a new tag and add float:left property with that class, I think then the issue will resolve.
I am using bootstrap to build my site and the main navigation uses dropdowns for second level choices.
In IE10 only (works everywhere else), the dropdown menu is inconsistently accessible and if you are able to access the second level choices, they disappear after hovering off of them. In other words as you hover down the list of menu items, the one above will disappear when you hover onto the menu item below it. Perhaps there are two problems: one being you can't access the dropdown (maybe a padding issue?) but the disappearing problem, I have never seen before.
Here's my fiddle with the problem
(**When viewing the fiddle make sure to adjust the width of the Result panel otherwise it will be collapsed for mobile)
My html is pretty simple:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-collapse collapse"><!--NAVIGATION-->
<ul class='nav navbar-nav'>
<li class='first'>Getting Around
<ul>
<li>Find Your Ride</li>
<li>Transit Overview</li>
<li>Carpool/Vanpool</li>
<li>Biking & Walking</li>
</ul>
</li>
<li>Travel Training
<ul>
<li>Do It Yourself</li>
<li>Transit Orientation</li>
<li>Transit Ambassadors</li>
<li>Schedule a Training</li>
</ul>
</li>
<li>Senior Safe Driving</li>
<li>Programs & Services
<ul>
<li>Mobility Programs & Services Locator</li>
<li>Mobility Programs Overview</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Thank you in advance! I am stumped.
A variety of issues at work here, but I seem to have solved it. IE10 doesn't play well with display:none and once I replaced with visability: hidden on my navbar>li>ul, things seemed much better.
Also, can't confirm but since bootstrap adds a background color of transparent to its a tags, I think the background color of the list items we're going transparent. Adding a background color, adjusting the line-height seem to fix.
link to fiddle in original now works correctly in IE10.
Ran into this 'funny' issue today. I have an asp.net mvc application, with a twitter bootstrap design template, which up until now has been working fine. However, when I added some #Scripts.Render("...") statements to the top of my view (Not shared layout file, but view) it seems to alter my layout!
View:
#Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
#Scripts.Render("~/signalr/hubs")
#Scripts.Render("~/Scripts/Stimline/connector.js")
<div class="span12">
<legend>Fleet List</legend>
<div class="row-fluid">
...
</div>
</div>
Whenever the three script statements at the top is added to my .cshtml file, it seems to move the entire div-part over to the right, so that it aligns with the edge of my browser. Removing the statements again causes it to go back to normal, adding the margin supposed to be there by default from bootstrap.
I have not done any changes to the bootstrap css.
Has anybody seen this, or at least something similar, before?
Here's how it looks with the #Render.Scripts statement:
And here's without it:
If you use the fixed header bar as a reference for right edge, you'll see that the table is aligned all the way to the right in one image, and correctly "spaced" from the edge in the other.
I recently ran into a similar issue where I was float li elements for a menu. I had each element on it's own line in the html, so a space was rendered between each item.
<ul>
<li style="float:left">Item 1</li>
<li style="float:left">Item 2</li>
<li style="float:left">Item 3</li>
</ul>
changed to
<ul>
<li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>
In your situation moving the script to the bottom of the page would be best to follow other best practices, but you could also remove the whitespace to get the same result.
I want a simple slide-down div-bar like on soundcloud, youtube, gmail
It is used in some really good websites with a menu dropdown, and I want to know how to do it using css or even jquery if needed. I can't post images yet, because i don't have enough reputaion yet... Here is the example on soundcloud
Check out this DEMO, it should help you for sure.
<nav id="main-nav">
<ul id="nav-primary">
<li>Menu 1
<ul class="subnav">
<li>beans
</li>
<li>pork chop
</li>
</ul>
</li>
</nav>
The css part is in the DEMO
In Drupal6, I basically have a block (a hierarchical menu structure) that turns out like this in HTML:
<div class="block block-menu_block" id="block-menu_block-1">
<div class="content">
<div class="menu-block-1 menu-name-menu-navigation parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="leaf first menu-mlid-248 active active-trail"><a class="active-trail active" title="" href="/">Start</a></li>
<li class="expanded menu-mlid-249 active"><a class="active" title="" href="/">Aktuell</a>
<ul class="menu">
<li class="leaf first menu-mlid-259">
<a title="News und Presse" href="/news-und-presse">News and Press</a>
</li>...
What I would like to get is actually a lot simpler:
<div id="topmenu">
<ul class="one">
<li>some main entry
<ul>
<li>
some sub entry ...
or maybe:
<div id="topmenu">
<h2>some main entry</h2>
<h3>some sub entry</h3>
<h3>another sub entry</h3>
<h2>another main entry</h2>
So, keeping the structure, but being able to use simpler, even completely different tags, if and when needed. I think I understand from the drupal docs, that I am (maybe) looking at
<div class="block block-menu_block"
id="block-menu_block-1"
==> module := menu_block
delta := 1 (?)
regrettably, none of the suggested
block-[module]-[delta].tpl.php
block-[module].tpl.php
block-[region].tpl.php
placed next to page.tpl.php (yes, I did clear the cache), has any impact. Even with just a big, shiny HELLO WORLD inside... no luck...
What do I need to override and how? (ideally some sort of recursive function?)
Thank you!
You can control all html output by overriding theme functions and templates in your own custom theme. Read the documentation to learn how: http://drupal.org/node/341628.
That said: if this really bothers you about Drupal, you may want to save yourself a headache and choose a different CMS/framework. Drupal is designed to produce generic html with enough divs and classes for 95% of the use cases. Clean and minimal html can be accomplished, but it can take a lot of time.
you can install the devel and the theme developer module. then you cativate theme developer and in the bottom left corner you can switch it on. after pointing on your block you get much information which templates are userd or if it's functions who generate the code, which functions to use for naming the overwrite.