I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I'm trying to fix.
Page URL is http://locabikes.de/
If you hover the mouse on the "DE" symbol in the upper right corner, the dropdown will show up but the topbar will also change it's vertiacal size covering the navigation bar.
Is there some way to only show other languages to choose without changing the size of a topbar?
This is the code I'm talking about:
<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
<li>
<span>DE</span>
<ul>
<li>EN</li>
<li>PL</li>
</ul>
</li>
</ul>
<div id="topSocial">
</div>
This is how I want it to look like after hoovering on the current language hyperlink.
Since you are using bootstrap I should suggest changing the markup of ul#lng to the markup given by bootstrap documentation for dropdowns.
http://getbootstrap.com/components/#dropdowns
Dropdown by default works on click but with the following tweak it will also work on hover:
http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns
Hope this helps you :)
Turned out I only needed to remove
overflow: hidden property from the parent #topbar div and it started working.
Related
I'm using an css only responsive menu on my page. It's basicly uses checkbox with label to open and close the menu.
But i've notice when the page content scroll and I click, it's back to the top. Is there any css only solution for it?!
I'm using this tutorial as reference https://www.sitepoint.com/pure-css-off-screen-navigation-menu/
This is caused because of the a tag.
when clicking <a href="#"><a> the browser reload the page and that is why it jumps to the top.
Change <a> to <span> and your problem should be solved.
of course, you might need to change some css to get the proper styling:
<ul class="navigation">
<!-- Change this to <span> instead of <a> -->
<li class="nav-item"><span>Home</span></li>
...
</ul>
i'm a newbie / self-taught html guy. I need to edit my (static) website's menu to make it mobile friendly for google within the next 4 days. I'm breaking my head trying to figure out how to do it, but no luck so far, so I'm getting desperate.
The way I'm making my entire website mobile friendly is by setting the viewport and changing the CSS if screen width is less than Xpx.
I need to use ONLY CSS to transform the following menu, to a menu button. ie in mobile view, have the entire menu hidden within a button at the top of the screen and make the menu appear/dropdown by clicking on the button.
This is a sample menu I have on my website: www.oikotrust.gr/en
And here's the mobile friendly one I managed so far (uploaded it here just for reference): www.oikotrust.gr/index-mobile.html
<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn">ΕΝΟΙΚΙΟ</div>
<div class="menu_btn">ΦΩΤΟΓΡΑΦΙΕΣ</div>
<div class="menu_btn">ΕΠΙΚΟΙΝΩΝΙΑ</div>
</div>
related CSS in original page
.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}
All and any help much appreciated!
you don't need to "transform" the menu, not neccessarely. You can use media queries to style your content depending on your viewport, and use visibility property to set up different elements for different viewports.
Small tip: always write the css for wider media queries at the top, following with the smaller wide media queries next until you get to your smallest viewport.
I wrote an article a while ago maybe this will help you:
http://readingssexy.com/blogpost/how-to-use-media-queries.html
As class menu is the parent class for all its subchild you can hide this class using media query for mobile screens, you can put a div just above your menu and place your button code there so what will happen is, on mobile screen you menu will be hidden first when user will click on this button you can show menu to him or toggle the menu open/close state. Hope you get this.
I have a navbar that looks like this: (See EDIT)
The only HTML is:
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>News
</li>
<li>Games
</li>
<li>Cafe
</li>
</ul>
<!-- END navbar list -->
I want the it not to collapse vertically and stay in a vertical bar on all screen sizes.
Does anybody have any css snippet that can remove the responsiveness?
EDIT2: http://jsfiddle.net/9KMR6/5/ I tried copy pasting some of the styles from bootstrap's non repsonsive example but I have an issue where other elements such as the image in the fiddle overlaps the navbar so the links stop working... Does anbody know why/how to fix?
Using the Bootstrap Customizer, try setting #grid-float-breakpoint to a very low value such as 1px.
Sounds like there's a media query inside the CSS file that automatically collapses the menu beneath a certain screen width.
If you can find the CSS files that apply to your page, try posting them here.
Alright, default bootstrap, eh? Their documentation defines small screens as their default state; all the other media queries scale up.
They also have a section on disabling the responsive behavior. Unfortunately...
As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar. -getbootstrap.com/examples/non-responsive
I'm officially out of my depth here, sorry. Maybe you can figure something out from their documentation.
I am creating a theme with Bootstrap and I would like my top menu to have:
about, home, contact etc., and another icon for messages. (you can check this image)
But when the page is viewed on mobile I would like the menu to collapse as in this image
But only the messages icon to be still visible.
Currently it is not, any ideas how I can do that?
Wrap the image icon with .visible-xs class example:
<img class="visible-xs" src="...">
Here is the link for more information:
Responsive utilities
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.