I am trying to change size Page titles. But I am not able change it.
I have found CSS for nav bar in custom.css as below:
#navigation {
position: relative;
z-index: 3;
li {
border: solid #E2E3E3;
border-width: 0 1px;
display: none;
/* WIDTH:33.333%; */
&:first-child {
border-left-width: 0;
}
}
}
Although, width is commented or removed from li, I am seeing width of nav bar 33.333% only.
What is that I am missing? Can someone help me?
Thanks for your help!
Here is how my page's nav bar look alike:
Liferay's welcome theme come with sas compilation. Inside compiled CSS, you need to change properties of CSS and then those will be accepted as final values.
Related
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
Im doing this web with Wordpress and one theme but i have a problem with a transition to the submenus.
If you can check the "QUÉ HACEMOS" submenu, you will see that when i try to click on an element of submenú if imposible by the margin top, do you understand ?
If i delete the 38px margin top of sub-menu class no problem, but I need that the submenú start and header border but i have this problem that i cant fix, please help.
Thanks a lot.
Find the following definitions in your CSS and edit respectively
.main-nav > li > a {
margin: 0px;
padding: 37px 25px;
}
li:not(.dt-mega-menu) .sub-nav {
width: 280px;
margin-top: 1px;
background: #043349;
}
This is my website: here.
My menu on mobile is not showing for some reasons. I know it's hidden probably, but I can't figure it out how to fix it.
I'm using bootstrap framework.
In your site CSS file http://www.florin-pop.com/work/Simple%20Eats/css/style.css ".navbar" class has set to height:70px, causing dropdown to hide.
Changing height:70px to min-height:70px will make drop-down appear.
or add below code inside media query #media screen and (max-width: 768px) {}
.navbar {
height: auto;
margin: -11px 0 0;
min-height: 70px;
}
I just edited the bs-example-navbar-collapse-1 element css properties of your menu to the following:
z-index: 9999;
position:absolute;
background:#FFF;
and the menu is displayed.
There is no z-index on your "navbar-collapse collapse in" and also no background.
so add the following
position:relative;
z-index: 9999;
background-color: #fff;
Question: What's the best way to create a horizontal menu with drop down capabilities that can be dynamically resized? (Or preferably, how can I edit my current menu to behave like that?)
Explanation: I'm using a thin, horizontal drop-down menu as the main navigation on my site. When the browser window is at full width, there are no problems, but when it is resized, the right-most link pushes down to the next line, as it is floated.
Horizontal menus are such a common thing, I know there have to be some common tricks and ways to create them so that they can be dynamically resized. So if trying to fix my current menu is too burdensome, I would be fine just to hear some tips or read some stuff on how to create better horizontal menus.
Here is what I think would be the main problem:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
I've tried different combinations of making this inline and making other tweeks, such as making the 150px width into a percentage, but that would create all sorts of alignment issues with the text.
Here is a demo with all of the code now: http://jsfiddle.net/HSVdg/1/
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my main question.
Tiny Drop Down uses a lot of CSS, so it's been quite difficult for me to try and make little tweeks.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Try my version, with display table/table-cell:
http://jsfiddle.net/HSVdg/10/
I've basically just replaced floats with display: table on .menu2 and display: table-cell on its children (li's)
This is how i see it
<nav>
<ul>
<li id="youarehere">Home
<li><a>Products</a>
<li><a>Services</a>
<li><a>Contact Us</a>
</ul>
</nav>
ul#navigation {
float: left;
margin: 0;
padding: 0;
width: 100%;
background-color: #039;
}
ul#navigation li { display: inline; }
ul#navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px #39f;
border-top: solid 1px #39f;
border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color: #000;
}
ul#navigation li#youarehere a { background-color: #09f; }
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.