Gridiculous Pro- Home page: move selection bar above image

  • Unknown's avatar
    graphixcomm · Member ·

    I am looking to move the red selection bar on the home page from below the image to above the image. Also, is there a way to make the slideshow widget the same size as my photo widgets on the home page, without making my images as small as the slide show?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Given the way the HTML and CSS is structured, we can move it up to the very top (above the title graphic and search box, but putting it right above the image would be difficult since at around 800px in width, your menu becomes two lines, and exactly where that happens is browser specific and it is not easy to cover all bases.

    Have you considered incorporating your “Contract Screening and Embroidery” line into your header image and then doing away with the graphic image at the top since it is basically repeating what is in the image?

    If you wish to try this, the following moves the menu above everything for screens 769px and wider. At 768px and narrower, the minified touch menu comes into play to replace the red menu. 

    @media screen and (min-width: 769px) {
.c12 #site-navigation {
    padding-right: 40px;
    position: absolute;
    top: 0;
    width: 97%;
}
.c12, #header {
    overflow: hidden;
}
#site-logo, #search-2 {
    margin-top: 70px;
}
}

    If you wish to try things without the top logo and search box, try the following instead. 

    @media screen and (min-width: 769px) {
#site-logo, .header-widget.widget_search, .site-description {
    display: none !important;
}
.c12 #site-navigation {
    position: absolute;
    top: 0;
    width: 96.67%;
}
.c12 {
    overflow: hidden;
}
.header-img {
    margin-top: 47px;
}
}
  • Unknown's avatar
    thesacredpath · Member ·

    As far as the slideshow resizing goes, I can’t seem to come up with a way that doesn’t go awry when the window or screen in narrowed (image gets larger than available space). In addition, the black background area doesn’t resize when it is made taller.

  • Unknown's avatar
    designsimply · Member ·

    I gave moving the red bar to just above the header image with this CSS—the caveats are the same ones thesacredpath mentions: if the menu falls to two lines (which it can do on smaller screen sizes) then the red bar will start to overlap the image. Feel free to test it out and see what you think though.

    @media ( min-width: 768px ) {
	#site-navigation {
		background-color: inherit;
		position: absolute;
		padding-right: 20px;
		top: 223px;
	}

	#site-navigation ul {
		background-color: #B20F0F;
	}

	.header-img {
		padding-top: 47px;
	}

	#header {
		padding-right: 20px;
	}

	#header .c12 {
		padding-right: 0;
	}
}

    Aside: I think the search box would look cool if it were a bit bigger but blended in a bit more color-wise. Try this out:

    #header .search-field {
	background: inherit;
	border-radius: 5px;
	font-size: 125%;
}

    Adjusting the slideshow can be quite tricky. Here’s an example that I came up with that will force the height to be a little bit taller and add a similar border to the other images just to the right. Try it out and see what you think:

    .home div.slideshow-window {
	height: 270px !important;
	border: 10px solid #B20F0F;
	border-radius: 0;
}

.home .slideshow-slide {
	left: 8px !important;
}

.home .slideshow-slide img {
	max-height: 270px !important;
}
  • The topic ‘Gridiculous Pro- Home page: move selection bar above image’ is closed to new replies.