Remove the grey arrow to the left of the home page

  • Resolved blueturnaround

    (@blueturnaround)


    9 years, 10 months ago

    This is my site: http://dhsfinancial.com/

    But on the home page, there is a grey arrow on the left (it wasn’t there before… that links to nothing. I don’t even have a page like that. Can I remove that arrow? How would I remove that?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Brooke "The Coconut Ninja"

    (@gococonutsdesign)

    9 years, 10 months ago

    Aloha Blueturnaround!
    You site looks very clean! I really love the feel you are going for. You can absolutely remove the arrow. You will need to change some code in your style.css file. Make sure you are using a child theme so you don’t lose all your customizations when the template updates. In your style.css file you need to find:
    .site-content #nav-below .nav-previous a:before, .site-content #nav-below .nav-next a:before, .site-content #image-navigation .nav-previous a:before, .site-content #image-navigation .nav-next a:before
    and add “display: none;”

    Then find:

    .site-content #nav-below .nav-previous a, .site-content #image-navigation .nav-previous a {
    display: none;
    left: 0;
}

    I added the display: none; so you can see what it should look like. When you do those two changes it will make the arrow go away. Good luck!!

    Aloha!

    Brooke
    The Coconut Ninja

    Thread Starter blueturnaround

    (@blueturnaround)

    9 years, 10 months ago

    Thanks! I tried what you said, and it didn’t remove that arrow. Also, I forgot to mention that the home page is set to display pages, not posts. Here’s what the whole code under “navigation” looks like now:

    /* =Navigation
----------------------------------------------- */

#image-navigation {
	clear: both;
}
.next-image {
	float: right;
}
.site-content .site-navigation {
	clear: both;
	margin: 1.5em 0;
	text-align: center;
}
.site-content #nav-below .nav-previous a,
.site-content #nav-below .nav-next a,
.site-content #image-navigation .nav-previous a,
.site-content #image-navigation .nav-next a {
	display: none;
	position: fixed;
		top: 0;
	text-align: center;
	width: 120px;
	height: 100%;
	z-index: 1;
}
.site-content #nav-below .nav-previous a:before,
.site-content #nav-below .nav-next a:before,
.site-content #image-navigation .nav-previous a:before,
.site-content #image-navigation .nav-next a:before {
	display: none
	background: #444;
	border-radius: 50%;
	color: #fff;
	content: '\f430';
	display: inline-block;
	font-family: Genericons;
	font-size: 50px;
	font-size: 5.0rem;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	line-height: 1;
	position: relative;
		top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
}
.site-content #nav-below .nav-next a:before,
.site-content #image-navigation .nav-next a:before {
	content: '\f429';
}
.site-content #nav-below .nav-previous a,
.site-content #image-navigation .nav-previous a {
	display: none;
	left: 0;
}
.site-content #nav-below .nav-next a,
.site-content #image-navigation .nav-next a {
	right: 0;
}
.site-content #nav-below .nav-previous a span,
.site-content #nav-below .nav-next a span,
.site-content #image-navigation .nav-previous a span,
.site-content #image-navigation .nav-next a span {
	display: block;
	top: 50%;
	margin-top: -50px;
	height: 100px;
	position: relative;
}
.site-content #nav-below .nav-previous a:hover,
.site-content #nav-below .nav-next a:hover,
.site-content #image-navigation .nav-previous a:hover,
.site-content #image-navigation .nav-next a:hover,
.comment-navigation .nav-next a:hover,
.comment-navigation .nav-previous a:hover,
.site-content #nav-below .nav-previous a:focus,
.site-content #nav-below .nav-next a:focus,
.site-content #image-navigation .nav-previous a:focus,
.site-content #image-navigation .nav-next a:focus,
.comment-navigation .nav-next a:focus,
.comment-navigation .nav-previous a:focus {
	opacity: 1;
}
.site-content .comment-navigation {
	margin: 0 0 3em;
}
.comment-navigation .nav-next a:before,
.comment-navigation .nav-previous a:before {
	background: #444;
	border-radius: 50%;
	color: #fff;
	content: "\f430";
	display: block;
	float: left;
	font-family: Genericons;
	font-size: 40px;
	font-size: 4.0rem;
	-webkit-font-smoothing: antialiased;
	font-weight: 300;
	line-height: 1;
	margin: 0;
	text-align: center;
	width: 40px;
	height: 40px;
}
.comment-navigation .nav-next a:before {
	content: "\f429";
	float: right;
}
    Brooke "The Coconut Ninja"

    (@gococonutsdesign)

    9 years, 10 months ago

    If you are using a child theme just add this to your style.css

    .site-content #nav-below .nav-previous a:before, .site-content #nav-below .nav-next a:before, .site-content #image-navigation .nav-previous a:before, .site-content #image-navigation .nav-next a:before {
    background: none repeat scroll 0 0 #444;
    border-radius: 50%;
    color: #fff;
    content: "";
    display: inline-block;
    font-family: Genericons;
    font-size: 5rem;
    font-style: normal;
    height: 50px;
    line-height: 1;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    display: none;
}
.site-content #nav-below .nav-next a:before, .site-content #image-navigation .nav-next a:before {
    content: "";
}
.site-content #nav-below .nav-previous a, .site-content #image-navigation .nav-previous a {
    left: 0;
    display: none;
}

    Thread Starter blueturnaround

    (@blueturnaround)

    9 years, 10 months ago

    Cool! That worked. Thank you very much.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Remove the grey arrow to the left of the home page’ is closed to new replies.