I don't have much experience in coding but eventually I manage to create a blog in Blogger. After several attempts to customize, I run into a problem with my main navigation bar. The problem is unless you are at the top of the page, the bar will expand as you scroll and cover the post underneath, which is extremely annoying.
I notice that my three-line navicon ("fa fa-bars") is also having a problem which is being not in the middle of the bar so I use my browser inspect function and find out that the container box ("indzign-box") is misplaced.
Is it that container box cause the irregular expansion of my navbar or something else and how to fix it?
/* Main Navigation */
nav.fixnavbar{position:relative;display:block;width:100%;background:#778595;z-index:99;padding:0;margin-bottom:0;font-size:0;opacity:1;}
.fixednav{position:relative;margin:0 auto;padding:0;max-width:1010px}
.fixednav li{display:inline-block;}
.fixednav li a{display:inline-block;padding:20px;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;}
.fixednav li a:hover{background:#6c7a89;color:#fff}
.nav-icon{display:none}
nav.fixnavbar.main-nav-scrolled{position:fixed;top:0;left:0;opacity:.97;-webkit-transform:translateZ(0);transform:translateZ(0)}
/* Box Info */
.fixednav li.indzign-box{color:rgba(255,255,255,1);z-index:2;font:normal 24px FontAwesome;cursor:pointer;float:right;display:inline-block;padding:18.5px 20px;transition:all 0.5s ease-out}
.icon-box{background-color:rgba(66,133,244,0.8);padding:8px 13px;border-radius:100%;color:rgba(255,255,255,0.5);margin-right:5px}
.icon-box:hover{color:white;background-color:rgba(66,133,244,1)}
.notif-info{background-color:rgba(245,245,245,0.5);border:1px solid #eee;padding:5px 8px;margin-bottom:10px;cursor:pointer;text-align:left}
.notif-info:hover{opacity:0.8}
.notif-info p{font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px}
#indzignbox{background:#fff;color:#333;font-size:13px;top:-381px;right:306px;padding:20px;position:fixed;width:320px;box-shadow:0 1px 5px rgba(0,0,0,.1);z-index:100;transition:all .5s}
#indzignbox .closebox{background:none;color:#999;padding:4px 6px}
<nav class='fixnavbar'>
<button class='nav-icon-position nav-icon' type='button'>
<span class='icon-line'/>
<span class='icon-line'/>
<span class='icon-line'/>
</button>
<ul class='fixednav' id='togglemenu'>
<li><a href='/'>Home</a></li>
<li class='indzign-box' onclick='document.getElementById('indzignbox').style.top='60px';document.getElementById('count-box').style.display='none';'><i class='fa fa-bars'/></li>
<li><a href='/search/label/list'>List bài viết</a></li>
<li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
<li><a href='/search/label/review'>Gundam Reviews</a></li>
</ul>
</nav>
Thank you in advance!
The cause of this problem is the padding property of .fixednav li.indzign-box
Just change the padding from padding:18.5px 20px; to padding:8px 20px;
Related
Good afternoon! I'm currently working on a navbar but the menu that pops up on from clicking on the hamburger icon (which shows all the links/navigation-items as a smaller screen widths) is a little too gaudy/not really good on a presentation level. How can I customize that dropdown menu to look better? HTML code is below:
<nav id="navigation" class="navbar navbar-expand-sm">
Brand
<button id="hamburger-icon" class="navbar-toggler" data-toggle="collapse" data-target="#collap-menu">
<span class="navbar-toggler-icon"><img src="D:\code\yannijewelry\images\evileyepng.png"></span>
</button>
<div id="collap-menu" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li><a class="nav-link" href="#">Etsy</a></li>
<li><a class="nav-link" href="#">Facebook</a></li>
<li><a class="nav-link" href="#">Instagram</a></li>
</ul>
</div>
</nav>
What element do I target, or rather, how can I customize a better dropdown menu? I noticed the hamburger icon, when clicked, also pushes the navbar elements up when it shows
Its hard to know exactly how to advise you on styling since we can't see exactly what styles you're currently viewing with just the HTML. Utilizing the core Bootstrap CSS, I can approximate your view and advise accordingly.
Let's say you want to change the background and text color of each of your menu items:
#collap-menu li{
background: #666;
padding-left: 20px;
}
#collap-menu li a{
color: #fff;
}
This would set your menu items to a gray background with white text with a little additional spacing for the text. You can replace the colors here with the branding colors of your website. Any changes beyond changing the text and color would need to be specifically outlined in your request.
I am trying to define two menu's in my header using the bootmetro framework. The first is my main menu and the second is my user menu.
For some reason the menu is visualized wrong the second time, the line space of the menu items are too large.
The code used to create a menu looks something like this
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
Actions
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li class="divider"></li>
<li>item4</li>
</ul>
</div>
The problem I run in to is shown in the screenshots below. In my second menu the menu item does not take the full with of the menu.
UPDATE:
The problem seems to be in the bootmetro CSS stylesheet and firebug narrows the search a bit (thanks Thanh Trung!). In inspect mode I can clearly see that the a href does not fill the menu item (li) in my second menu, while it does take the max width in my first menu.
The part in the bootmetro CSS looks like this:
.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
Additional question: What does this '>' cause? I have never seen that before.
In both menus the CSS class "dropdown-menu" is used, BUT, when I remove the body of this CSS class only the first menu changes accordingly.
Main question: So why is this class not properly inherited by me second menu item?
For completeness again the HTML code for the second menu (the menu that shows the artifact):
<div class="dropdown pull-left">
<a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
<b class="icon-settings"></b>
</a>
<ul class="dropdown-menu pull-right">
<li>Settings</li>
<li>Settings</li>
<li>Settings</li>
<li class="divider"></li>
<li>Log out</li>
</ul>
</div>
Correctly visualized menu
Wrongly visualized menu
Inspection: the "a" is not taking the full width
Inspection: the list item is taking the full width
Because the code is identical, but there are difference when displaying, it means that the css is affecting it. Without given us the css, it's impossible to tell what is the problem.
Here are css properties that could affect the total height of an element: height, line-height, padding, margin.
You can use Firebug or Chrome inspector to inspect an element to see its styles
UPDATE
bootmetro.css line 2018 is affecting (overriding) it
#top-info a {
display: inline-block;
height: 46px; /**** should be removed or override *****/
color: #5A5A5A;
}
Also I suggest you to use Firebug (an addon of firefox) to inspect elements, dont use the inspector of Firefox
I feel like a moron having to ask this, but I have always evaded CSS at all costs, and as I now find myself needing it again, I have been scavenging Google for an example with no luck.
Basically I have icons specific to each category, and would like to create a horizontal nav bar in CSS/HTML using these, but also displaying a text link under them as well. I have found snippets for doing one or the other, but every time I try and combine the two together, the entire page seems to breakdown.
Can anyone provide an example of how this can be done? If it helps, it would basically look like...
[-IMAGE-] [-IMAGE-] [-IMAGE-]
[-TEXT-] [-TEXT-] [-TEXT-]
The effect can be easily get through background-position in CSS with proper padding-top applied to the li elements:
background-position: top;
padding-top: 50px; /* Height of image */
Here is an example fiddle.
Update:
Here is the more descriptive fiddle with different images on different li elements.
http://jsfiddle.net/LajUZ/2/
HTML:
<ul class="nav">
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
</ul>
CSS:
.navitem
{
float: left;
}
I'm trying to align the share, like and tweet button horizontally but I can't get the share button right. I tried adding vertical align top, changing the height and display:inline but it always remains more or less 10px belowe the others. What should I do to get them all aligned?
<div style='vertical-align: top;'>
<a expr:share_url='data:post.url' name='fb_share'/>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-related=':' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:20px;'/>
</div>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
Thanks
An easier method than styling these elements individually, is to sandwich them inside <li> tags--allowing you to position the parent <ul> easily, and also float the <li> tags (creating the 'inline' effect you're after.)
jsFiddle didn't like the facebook APIs, so I used 3 twitter buttons instead; the code looks like:
<ul class="social_network">
<li>
Tweet
</li>
<li>
Tweet
</li>
<li>
Tweet
</li>
</ul>
With some very simple CSS (including a subtle outline so you can see the boundaries of the <li> elements:
.social_network {
position : relative;
list-style-type : none;
}
.social_network li {
float : left;
border : 1px solid rgba(0,0,0,.1);
padding : 6px;
margin : 2px;
}
You can find an example of the above here: http://jsfiddle.net/kgFaW/
This should put you in the right direction. Let me know if you run into any issues with the Facebook APIs.
to do display:inline you can wrap each control into list like this:
<ul><li>
<a class=....../>
</li> <li> <a expr....../> </li></ul>
Also, add: list-style-type:none;
To make your controls stick to the right side of the screen,
do:
position:absolute;
right:0;
Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:
I have list items for my main menu:
<div id="menuContainer">
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students">Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors">Visitors</li>
</ul>
my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.
When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.
Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.
Any ideas?
You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.
You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.
If you need more detailed answers, you may want to give us an online example.
First well form the html, then try your css again.
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students"> Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors"> Visitors</li>
</ul>
it's better to use line-height instead of text-indent. you need to use image replacement technique. like this
<ul id="menu">
<li><span>Home</span></li>
</ul>
and CSS
ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }