My website has a pretty long navigation bar that shows perfectly on a computer browser. However, when I load the website on a tablet or a smaller browser, the navbar turns in 2 rows.
Like this:
Now my question is, is it possible to make the navbar smaller or the text so that the navbar shows as it should? Like this:
http://puu.sh/90e1O.png
I've tried to play a bit with the Viewport, but that didn't helped me much :/ Here is a live preview:
http://website.craftshark.net/mcprofile/
You can get the code by the inspector mode. I do have a gist of the Nav here tho, but it could be incomplete: https://gist.github.com/matthijs110/b7c554f0abd4c38fa3c4
Does someone know how I can fix this?
Try this, it should work http://www.bootply.com/mjEnd2pAem
I don't recommend using this from line 44-46:
<ul class="domain">
<li><h4 id="domain" title="<?php echo $lang['NAV_IP-TOOLIP'] ?>">play.domain.com</h4></li>
</ul>
Because you're wrapping the url with your custom class and the bootstrap menu's css is not affecting this part. You're better off putting it in a and add your custom class to the a instead of ul
EDIT:
Actually, it breaks into 2 line if the resolution is smaller than 993px. Let me see if I can find you another solution
I thinks problem is that you use custom padding-left for div with id=domain, and you wrap link play.domain.com by html tag .
Bootstrap uses css selectors like .navbar-nav>li>a. There is no place for <h4>. Try to use Bootstrap's navbar as it is without customization indentations (paddings, margins) and everything will be work fine.
Related
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
I am looking to create a left nav bar like the one on the Treehouse site here:
http://teamtreehouse.com/library
The main thing I am trying to replicate is the links tooltip that slides out/fades in beside the icon. Looking at the source, I believe thats done through CSS? correct me if I'm wrong.
Also, I noticed they have svg classes on the links, are they just for site responsiveness and not really related to the function of the links/tooltip?
Thanks for any help on this and please let me know if I can provide any other info.
For the bar itself simply have floated div extended to 100% height and set it's position to fixed.
The tooltips that pop out can either be done with javascript or CSS.
For javascript or jQuery, there are numerous tooltip libraries that will give you the same functionality. In CSS you can add a hover state that shows the div. Either one of these approaches will work.
For the CSS solution see this related question: Using only CSS, show div on hover over <a>
The SVG class on these from what I can tell is actually the icon itself. SVG is a neat format that lets you apply font styling to images. If you look at the bootstrap framework icons you'll see this is how they are displayed. I'm guessing that the same technique is being used here.
I'm debugging a website for a code written by somebody else. Typically I used bootstrap for responsive rows and columns but I believe this site is built on zurb-foundation.
Here is the url of the page. (www.edcast.com/privacy)
screenshot for a a visual of what i mean.
http://imgur.com/WTGDQTK
I will play around with this, but having a second eye and some other input would be highly appreciated!
Update: So far I've tried changing "overflow: visible" to hidden and auto
I've also tried to apply a clear: both to a variety of different divs
If you take a look at the image I posted below, you can see that the div with the id image-top-div is pushing everything over. You will need to resize the image and play with the margin and padding. You can see me here in the gif taking out the margin-left which solves it.
I am working on the layout of a blog, and the layout is now broken:
The right column is now sliding under the menu and I don't know what is causing this layout issue. I can't spot the trouble in the code. The page is generated out of a blogger template. It contains its own CSS.
Anyone sees the problem? The layout used to work fine. Thanks!
Simplest answer is the headers wrap (.bloginner-wrapper) is set to 'z-index:999'. Everything shouldnt be in wrapped divs, float your sidebar and content inside one responsive wrap.
I noticed two extra </div> in the code, but could not figure why these were generated. I had to restart the template modifications from scratch to solve the issue.