I need to center the items on a list of my social-media menu (the 4 icons under the title on the sidebar).
I got to made them distribute evenly (each item width is 25% since I have 4), the "ul" is displayed as table.
However, the icons inside each "li" stick to the left ! Any ideas ? THANKS !
http://www.blogderod.com/
.social-navigation {
margin: 0 15% 10%;
display: table;
width: 70%;
}
.social-navigation li {
display: inline-block;
text-align: center;
float: none;
width: 25%;
}
Add the following to your CSS:
.social-navigation a,
.social-navigation a:before {
width: 100%;
}
This makes both the link and the social icon take up the full width of the li, allowing them both to centre correctly.
Add "text-align: center;" on the LIs and make the links inside the LIs "display: inline-block;".
Edit this class like this:
.social-navigation a:before {
content: "\f415";
font-size: 24px;
position: absolute;
top: 0;
left: 20px;
Change top/left position as you wish.
Make this changes in your CSS
media="all"
.social-navigation a:before {
content: "\f415";
font-size: 24px;
/* position: absolute; */
/* top: 0; */
/* left: 0; */
}
Hope that helps
Related
I am trying to get my top menu to be exactly full width of the screen at all times. Sadly, while it works OK on desktop, it keeps extending beyond the expected width when on mobile.
To give some context: I'm trying to build a child theme of the "Rookie" theme (https://wordpress.org/themes/rookie/).
My goal at this point is to replace the default menu of the theme with a top bar, on which I want the burger menu on the left, logo in the middle and the search button on the right.
This is already done, but for a reason I do not understand, when testing on mobile, the top bar is exceeding the expected 100% width. This can be observed when trying with "Phone 6/7/8" of the Chome dev tools. I also tried with a physical device and got the same result.
The page is https://gornik2.kosimus.eu/
Picture from the dev tools
I spent several hours trying to figure it out and I essentially ran out of ideas at this point. I defined the width to 100%, 100vw and so on, tried max-width, checked parent elements and made sure that the width is not increased anywhere.
Pretty sure there is something incredibly stupid and small I am missing. Ideas would be greatly appreciated.
Thanks!
PS There is a bunch of other issues as well on that page (colors etc.
- please just ignore those).
/* Make sure that the header is full-width */
.site-header {
width: 100%;
}
#masthead {
width: 100%;
}
/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
display: none;
}
.main-navigation.toggled .nav-menu {
display: block;
background: #000000;
}
.main-navigation li {
float: none;
}
/* Menu bar to the top */
.main-navigation {
display: block;
position: fixed;
top: 0;
height: 65px;
width: 100%;
}
/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
margin-top: 65px;
}
/* Display navigation over other stuff */
#site-navigation {
z-index: 100;
}
/* Top bar styling */
/* Hamburger menu */
.main-navigation .menu-toggle {
/*Send the whole button to the left*/
display: inline-block;
width: 20vw;
height: 65px; /* Set the height of the whole top bar to 65 pixels */
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.main-navigation .menu-toggle .dashicons {
display: inline-block;
color: #000000;
position: relative;
left: 27%; /*Required to be positioned properly on the white bg*/
font-size: 4rem;
vertical-align: baseline;
}
/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
background: #ffffff;
}
/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
display: none;
}
/* Search button */
.main-navigation .search-form .search-submit {
display: inline-block;
width: 20vw;
height: 65px;
background: #ffffff;
color: #000000;
position: fixed;
top: 0;
right: 0;
padding: 8px 16px;
}
.main-navigation .search-form .search-submit:hover {
background: #ffffff;
color: #000000;
}
.main-navigation .search-form {
display: inline-block;
margin: 0;
}
.main-navigation {
background-color: #1a754a;
}
/* Logo centering and styling */
.site-branding {
display: inline-block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: calc(50% - 32.5px);
z-index: 110;
}
.site-logo {
margin: 0px;
float: none;
}
.site-logo img {
max-height: 65px;
}
.site-content {
margin-top: 65px;
}
The pseudo element (:after) added to th tag of the LEAGUE TABLE is causing this issue. This issue can be fixed if the position value changed from "absolute" to "relative".
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute; */
position: relative;
}
Screenshot
I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
I am working on a layout for a webshop and am experiencing a problem which seems to be very specific.
There is a dropdown navigation which is design to look kind of a tab with a box under it. The point is, that there is a 1px border line between the tab (first level Menu Item) and the box (second level items) which I can't hide.
I thought about giving the second level box a lower z-index than the first level element, but that didn't changed anything. I read a lot about z-index, how it works and how it NOT works, but nothing was about z-index within one list.
This is how it should looks like and how it really looks like: http://i.stack.imgur.com/xbQ6x.png
I created a codepen, which shows the problem very good, when hovering the first level items: http://codepen.io/anon/pen/bNqJxN
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
.dropdown-1-2 {
float: left;
width: 50%;
}
}
I usually solve this issue with z-index to have the bottom of the li to overlap the top of the dropdown.
In your case, I had to remove the * selector for the z-index which came after the li and dropdown which was resetting the z-index to 2 on everything in that navigation. Instead I created just the one stacking context (here's an article on it) for the first nav to appear above the second, and then I gave the ul position relative and the dropdown a z-index of -1 and -1px top margin to move it just behind the unpositioned li.
#mainnav {
...
ul {
#include reduced-list;
...
position: relative;
li .dropdown{
...
margin: -1px 0 0 -1px;
z-index: -1;
...
&#nav1 {
z-index: 2;
}
&#nav2 {
z-index: 1;
}
Sorry, the codepen didn't save.
You can solve it adding a pseudo element to cover the border
li:hover:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: white;
bottom: -1px;
left: 0px;
z-index: 999;
}
codepen
Thanks so much!
Both answers solved my problem like a charme!
I created a codepen with the solution here: http://codepen.io/anon/pen/NPpQOq
ul {
#include reduced-list;
position: relative; /* YEAH */
float:right;
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: -1px 0 0 -1px; /* YEAH */
z-index: -1; /* YEAH */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
}
Placing a nested child under a parent element seems to be possible :-)
EDIT Changed the text to reflect better the problem.
For live demo you see the website here: http://wow-klickers.de/ (The CSS here I have modified, to maybe solve the problem.)
So I have the following scenario. My website contains a navigation bar, which in the picture above contains a "Forum" button and there is above a logo. If I go over the button the hover effect hides the part of the logo which extends into the button. I want to hover over the button but not hide the part of the logo.
Here are my code snippets:
<h1 id="logo"> // the blue box of the 2. picture
// the blue box of the 1. picture
</h1>
CSS things:
#logo a {
width: 275px;
height: 126px;
display: block;
position: relative;
bottom: 18px; // added here
}
h1#logo {
margin: 0;
position: relative;
left: 85px;
top: 6px;
background: url("images/logo.png") no-repeat;
width: 275px;
display: block;
z-index: 2; // changed here
height: 126px; // added here
}
#primary-menu-bar li a, #primary-menu-bar ul.menu li a {
display: block;
white-space: nowrap;
height: 37px;
line-height: 29px;
position: relative;
z-index: 1;
}
EDIT I tried with padding or margin, but with margin my logo is cut off but the logo should overlay over the button. And padding does not work..
Add z-index:10 to h1#logo, and not just on the a tag inside.
I would really like to stop the menu items jumping around on this site as the parent item expands to fit its child.
I can get it looking how I want when I add this CSS, forcing the menu items to have fixed widths:
/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}
However, this is clearly not ideal, as the menu needs to be dynamic...
Is there a way to achieve what I want via CSS? I hope so!
I am using the Superfish menu that comes with Theme Hybrid for Wordpress.
Thanks in advance for any help you can offer!
I get your point .. let's see again.
This build uses position: relative/absolute; instead of float: right/left; and it has one flaw mentioned below.
However I haven't test this in old browsers including IE (tested in Chrome & Firefox), but I hope this may provide you some idea to implement it. :)
#primary-menu .menu /* new rule */ {
position: relative;
height: 50px; /* The flaw is you have to fix the menu's height here */
}
#primary-menu ul {
position: absolute;
right: 0;
top: 0;
}
#primary-menu li {
float: left;
list-style: none outside none;
margin-left: 10px;
position: relative;
}
.sub-menu {
background: none repeat scroll 0 0 #244563;
clear: both;
display: none;
font-size: 0.8em;
overflow: visible;
padding: 5px 0 !important;
position: relative;
right: 0;
text-align: right;
top: 30px !important;
width: 700px !important;
}
.sub-menu li {
display: inline !important;
float: none !important;
padding: 10px 0 !important;
width: auto !important;
}