Do you have a link to your site?
Hi Paul
I managed to allocate the social bookmarks on the menu bar by adding:
a.social-media-icons, #social-media-icons {
position: relative;
margin-right: 10px;
margin-top: 0;
right: 0;
top: 45px;
z-index: 2;
}
however, I did not manage to remove the site title and now there is a gap between the header and menu bar.
help please!!
thanks
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I did not manage to remove the site title
Try:
#site-title .home {
position: absolute;
left: -9999em;
}
The gap is caused by <div class="clear">
.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Use a Custom CSS plugin to hold your CSS modifications.
hi Andrew
thanks for you help.
I have applied the the code and the site title has gone which is great. however, the gap between header and menu bar still there. Any thoughts on that?
cheers
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Do the same for <div class="clear">
?
#header .clear,
#site-title .home {
position: absolute;
left: -9999em;
}
hi again
I am a newbie, so I am learning as a go.
regarding the gap, what shall I do with the code below on header.php?
<div class=”clear”>
thanks
ops had not seen your last msn
Ok, I applied the #header .clear,
#site-title .home {
position: absolute;
left: -9999em;
}
but now the text came up the page into the slide show.
shall I use another code?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Yeah, when you fiddle with one element it usually messes with another element.
So we don’t go on forever, just do this:
#access {
width: 96.5%;
float: left;
position: relative;
}
The gap is now caused by your social elements.
You can resolve this by positioning absolute your social elements but that will never work well in mobile platforms within your current page structure.
To properly resolve this, first create a Child Theme and then copy the header.php file into the Child Theme directory.
Once you’ve done that, edit the header.php file from your Child Theme and replace its contents with the code from this PasteBin page http://pastebin.com/FstcAf4D .
Then in your Child Theme style.css file add this:
a.social-media-icons, #social-media-icons {
position: absolute;
top: 10px;
}
#access #social-media-icons a {
width: auto;
display: inline-block;
width: 32px;
height: 32px;
margin-right: 6px;
padding: 0;
}
Edit: Code amended.
I will try that
many thanks for your help.
regards
marcelo
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You may need to move this:
#access {
width: 96.5%;
float: left;
position: relative;
}
Outside of your Custom CSS plugin and inside the Child Theme style.css file.
HI Andrew
I created the child theme but could not get the site to look good, so I edit the pinboard custom css as follow:
a.social-media-icons, #social-media-icons {
position: absolute;
top: 10px;
}
#access #social-media-icons a {
width: auto;
display: inline-block;
width: 32px;
height: 32px;
margin-right: 6px;
padding: 0;
}
#site-title, #site-title img { width: 100%; }
#site-title img {
margin: 0;
}
#site-title .home {
position: absolute;
left: -9999em;
}
and now the header looks almost ok with padding on the left and social bookmarks on the left too.
Is it possible to remove the padding and positioning social bookmark to the right top corner?
many thanks
hi again
I have done a few adjustment on custom css and removed the padding.
I will try to position the bookmark to the right top corner.
a.social-media-icons, #social-media-icons {
position: absolute;
top: 10px;
}
#access #social-media-icons a {
width: auto;
display: inline-block;
width: 32px;
height: 32px;
margin-right: 6px;
padding: 0;
}
#site-title {
margin:0;
line-height:0;
float:top;
}
#header input#s {
margin-top:0;
}
#site-title img {
margin: 0;
}
#site-title .home {
position: absolute;
left: -9999em;
}
#site-title, #site-title img { width: 100%; }
Change your first css to this
a.social-media-icons, #social-media-icons {
position: absolute;
top: -50px;
right: 0;
}