got myself in a tight spot here, the widget on the right hand side of my website has lost its formatting, i need it all in one line, and to drop below the left hand widget when viewed in mobile: https://aurexgroup.com/
Im using a enfold child theme on a wordpress site.
i assume its a css issue, but i cant find the code that relates.
i have looked through the css style sheet in the theme, this is all i could for widgets find:
}
#top li.sf-widget-element{
list-style: none;
clear: none;
margin-left: 0;
padding: 0;
width:auto;
display:inline-block;
margin-right: 30px;
}
And then this in the quick css section in the enfold general styling tab:
}
#footer .flex_column{
float: right;
}
#footer .flex_column.first{
float: left;
}
.footer_color a, .footer_color .widget_first{
color: #cf5c1a !important;
}
#footer .flex_column .widget{
margin-top: 0;
margin-bottom: 0;
line-height: 26px;
display: inline-block;
width: 100%;
}
.copyright a[href*="kriesi"]{
display:none !important;
}
Very open to any ideas!
please help!
Related
I cant for the life of me figure out how to edit the style.css file to edit the width of the top navigation bar. our website as you can see, the top nav bar is too large, all the items should fit on one line. Here is the code:
.top-nav {
background: #151515 none repeat scroll 0 0;
}
.nav-top li {
display: inline-block;
}
.top-nav a,.nav-video a {
color: #fff;
display: block;
font-family: josefin_sansbold,sans-serif;
font-weight: 200;
padding: 25px 15px;
text-transform: uppercase;
position:relative;
font-size:30px;
}
.top-nav{
text-align: center;
}
div#Video_Categories {
padding: 10px 5px;
background: #fafafa;
}
#nav a {
color:#004282 !important;
font-size:18px !important;
}
There is also a chance that I may be looking at the relavent code for the top menu bar. I could attach the full css file here if possible. Bare with me this is my first post!
If you have the ability to override your current styles or edit them, then you can change the width of the class .container_24.
.container_24 {
max-width: 1200px;
}
Changing that gives me this:
I've created a responsive fixed Top Navigation Bar for a site I'm working on. I'm teaching myself CSS and as of this moment, I only have 2 weeks experience with the language.
Fiddle Link can be found here.
/* BASIC STYLE START */
body {
margin: 0;
background-color: #FFFFFF;
font-family: 'Titillium Web', Arial, sans-serif;
}
/* BASIC STYLE END */
/* NAVIGATION BAR START */
ul.topnav {
margin: 0;
padding: 0;
background-color: #2F2E2E;
overflow: hidden;
list-style-type: none;
width: 100%;
position: fixed;
top: 0;
}
ul.topnav li {
margin: 0;
padding: 0;
float: left;
}
ul.topnav li a {
margin: 20px;
padding: 0;
color: #FFFFFF;
overflow: hidden;
display: block;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
}
ul.topnav li a:hover {
color: #B0AAA9;
transition: 0.3s;
}
ul.topnav li a.active {
color: #B0AAA9;
}
#media screen and (max-width: 800px){
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* NAVIGATION BAR END */
My issue is with aligning the links within the Nav Bar. I want to align the below accordingly.
Allegiance Title - Left side of Nav Bar
Home-FAQ Links - Center Column of Nav Bar
Register & Login Links - Right of Nav Bar
The problem I face is that I can't seem to actually manage to align them properly. I figured out how to change the class in HTML and move the Register & Login links to the right, but I can't move the Home-FAQ links to the centre. Also, when I do change values in padding / margin in the Nav Bar, the responsive Mobile menu changes with the links all over the place (non-centered).
I would appreciate any help as I'm very new to this. Also, please let me know if I have redundant code in the stylesheet.
Ultimately, I want to create one of those 3 column parallax scrolling sites with this Nav Bar sitting on top. I was going to use a downloaded template, but there is no point as I won't learn anything.
The issues are:
You cannot have a <div> directly inside <ul>. It's totally invalid.
The rule ul.topnav li.right, ul.topnav li is contradicting with float: none;
What you need to do is, create this rule:
ul.topnav li {float: left;}
You should be all set. If you need parallax scrolling, it definitely requires JavaScript.
Preview
Fiddle: https://jsfiddle.net/9go9x2ug/
Have looked on SO for an answer, but I seem to have one stemming from mods I did to style.css header. Actually, not sure mods have 'pushed' hamburger menu off the screen or I just need to adjust colour. When one forst goes to site - menu items appear in word format, not collapsed menu, then disappear.
I am working on WP, using Genesis framework for my website - shinwag.com
.responsive-menu-icon {
cursor: pointer;
display: none;
text-align: center;
}
.responsive-menu-icon::before {
content: "\f333";
display: inline-block;
font: normal 20px/1 'dashicons';
margin: 0 auto;
padding: 10px;
}
.site-header .responsive-menu-icon::before {
padding: 0;
}
http://www.shinwag.com/wp-content/themes/lifestyle-pro/style.css line 1959
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu, .genesis-nav-menu.responsive-menu in this class put display:block; remove display:none;
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).
I'm styling a list of recent posts and images from a plugin from wordpress. I know there is a wordpress section but my question is to just get some advice as how to style this list.
The website is here
This is what it looks like now.
This is my CSS
.advanced-recent-posts {
list-style-type: none;
}
.advanced-recent-posts li {
font-size: .7em;
font-weight: bold;
line-height: 20px;
color: #761616;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
position: relative;
top: -35px;
border: 1px solid #000;
}
.advanced-recent-posts li a {
margin-left: 10px;
}
.advanced-recent-posts li img {
position: relative;
top: 0px;
left: -10px;
padding: 5px;
border: 1px solid #999;
}
and so far so good. But because both the image and the title & date are in the some They move together which is not what I want, but because it is a plugin I dont know how to change that. So I was hoping with the provided website and CSS that someone could help me just make that second line of each recent post follow directly under the first. Like in my design here.
#Bonjour: This is what I got doing the
.advanced-recent-posts li { display:table-row; vertical-align:top;}
(and of course with all the other styling I had on it)
The post titles are at least flowing right.
Some weird positioning going on there. Anyway, there are two ways to make this happen:
Float the image left, add a bit of right/bottom padding. This way text naturally flows under the image
Take advantage of the relative positioning on the li and set position:absolute on the image, while giving the li enough padding to move the text from under it. This way text will never flow under the image
Examples: http://jsfiddle.net/Ucrsk/
Try modifying the style of the anchor ie.
.advanced-recent-posts li a {
display: block;
margin-left: 10px;
}
Just to reiterate from my comment in your question, try using:
li {
display:table-cell;
vertical-align:top;
}
OR
li {
display:table-row;
vertical-align:top;
}