Goran navigation menu css

isabelashdown · Member · Oct 16, 2016 at 4:30 pm
Copy link

Add topic to favorites
This might be a big ask … but is it possible to:

a) hide the page-title on each page, and then

b) move the site navigation menu to sit centrally within the space where the page-title currently lives?

Thanks for any advice!

The blog I need help with is: (visible only to logged in users)
jennamcknight · Member · Oct 16, 2016 at 9:13 pm
Copy link
I just accomplished the first part of this yesterday. I hope you know where the CSS page is where you just add little tidbits that override the Goran code. You might not need all of it, but once I got it added, that Page Title was history. Add this:

.hero-wrapper {
margin-top: -50px;
background-color: #000;
display: none;}
/* eliminate whole title area, like DESIGN*/
.hero {
margin-bottom: -50px;
background-color: #fff; display:none;}
isabelashdown · Member · Oct 17, 2016 at 7:46 am
Copy link
Hi Jenna – this did successfully remove the Page Titles, but it also removed all the banner images/featured images which I want to keep. So now I just need to work out which bits of your code to use whilst still keeping the images … Many thanks for sharing!
siobhyb · Member · Oct 17, 2016 at 3:19 pm
Copy link
Thank you for pitching in, Jenna!

Isabel: The following will hide only the page titles from your site:
```
.hero .page-title {
    visibility: hidden;
}
```
The following can then be used to centre your menu:
```
@media screen and (min-width: 1020px) {
    .main-navigation ul {
        text-align: center;
    }

    .content-area, .main-navigation {
        width: 68%;
    }

    .site-branding {
        width: 22%;
    }
}
```
Let me know if that helps you to achieve what you’re after.
isabelashdown · Member · Oct 17, 2016 at 5:29 pm
Copy link
Hi siobhyb, and many thanks for this. The hiding page titles trick works brilliantly – one more question on this: is it possible to adjust this so it ONLY hides the homepage title (currently ‘Welcome’)?

Ref centering my nav menu – your code does cause the menu does shift a little to the left, so I think it’s now centred in the available space between my logo image and the right hand side. So I’m thinking in order to centre it completely and have it at the top of the page, is it possible to move the logo image down to create a wider space for the nav menu?

Thanks so much for your help!
jennamcknight · Member · Oct 17, 2016 at 9:07 pm
Copy link
Ooh, that’s cleaner; I will put this in place of what I have:
.hero .page-title {
visibility: hidden;
}

Thanks for the additional coding as well; I will give some of those a try!
Jenna
siobhyb · Member · Oct 18, 2016 at 10:47 am
Copy link
You’re welcome, Jenna!

Isabel: If you only want to hide the home page title then the following will do the trick:
```
.home .hero .page-title {
    visibility: hidden;
}
```
Can you try replacing the original CSS I provided for centring the navigation with the following snippet?
```
@media screen and (min-width: 1020px) {
    .main-navigation ul, .site-description, .site-title {
        text-align: center;
    }

    .main-navigation, .site-branding {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .site-logo {
        margin-left: auto;
        margin-right: auto;
    }
}
```
The above will centre your logo at the top of the page and the menu beneath that.

Let me know if it works for your needs! :)
isabelashdown · Member · Oct 18, 2016 at 11:19 am
Copy link
I am SO happy siobhyb – exactly what I was after. Thank you :)
siobhyb · Member · Oct 18, 2016 at 12:06 pm
Copy link
I’m so glad to hear that! :) We’re right here if extra questions come up, too.
isabelashdown · Member · Oct 19, 2016 at 10:04 am
Copy link
Hi siobhyb – I *think* this only occurred after these changes, but I could be wrong. If you look at my individual Book pages, there’s now a grey bar behind the navigation tabs, where it used to be a lighter transparency of the featured image. Do you know what I can do to correct this? Thanks!
siobhyb · Member · Oct 19, 2016 at 4:22 pm
Copy link
Hi Isabel,

I believe that this may be due to the low ratio between the width and height of the featured images on those pages.

As we’ve increased the height of that area, featured images now need to be a larger height in order to take up the full amount of space. The ratio between the width and height also needs to be fairly large as the theme scales images.

I can see that the featured image on the following page is 3726px × 2532px:

https://isabelashdown.com/books/flight/

Could you attempt to upload an image with a width: height ratio of at least 3:1 to see if that resolves the issue?

Thanks!
isabelashdown · Member · Oct 19, 2016 at 5:39 pm
Copy link
So, I’ve since noticed Little Sister page is fine, but the other 5 books have this problem. So I tried out 2 things on the Flight page – firstly I tried your suggestion and put up a 3:1 image of 1512 x 500 (in place now) – then I tried the exact same dimensions as the one I have on Little Sister 1512 x 834 … and neither worked! *scratches head*
siobhyb · Member · Oct 20, 2016 at 9:28 am
Copy link
Hi Isabel,

I was scratching my head on this one too! I eventually tracked down the issue though. :) The following custom CSS, which you previously added, is causing the issue:
```
.hero-image .hero.with-featured-image {
    padding: 180px 0 2em!important;
}
```
If you can remove the above, it will fix the issue.

Do you remember your reasoning for adding the above custom CSS to begin with? I’ll be happy to work with you to create another snippet that does the same job the above did, but without impacting the height of your headers.
isabelashdown · Member · Oct 20, 2016 at 10:47 am
Copy link
Hi siobhyb
OK, so I went back through my notes and found that code you mention was put in place to reduce the height of the featured images. So when I just deleted it, the grey bar disappears but all the features image become twice as high ie massive so you have to scroll down a long way to see page content, and the featured image goes out of focus.

The weird thing is, that code applies to all pages with featured images, but there’s no problem with any other than the individual books (with the exception of Little Sister which is a recent addition – maybe a clue?). So if you look at all the top level pages eg Events = fine, but next level down eg Flight = grey bar.

The mystery continues!! Really appreciate your time on this :)
siobhyb · Member · Oct 20, 2016 at 4:34 pm
Copy link
Hi Isabel,

I can also see that you’re using CSS to hide the page title, which is contributing to the issue:
```
.page-id-3544 h1 {
	display: none;
}

.page-id-5779 h1 {
	display: none;
}

.page-id-2808 h1 {
	display: none;
}

.page-id-2811 h1 {
	display: none;
}
```
Could you replace every instance of display: none; with visibility: hidden; in the above CSS? That will make sure the titles are still hidden but won’t impact the layout of the page’s.
isabelashdown · Member · Oct 20, 2016 at 5:08 pm
Copy link
You cracked it! Thanks so much siobhyb – I’m such an amateur with all this coding; don’t know what I’d do without you brilliant lot at WordPress :)
siobhyb · Member · Oct 20, 2016 at 5:10 pm
Copy link
Huzzah! I’m glad that fixed things up! :) You know where to find us if extra questions come up, too.
isabelashdown · Member · Oct 24, 2016 at 6:54 pm
Copy link
Hi siobhyb – another Q – a lot of space seems to have opened up between my two rows of books on the ‘Books’ page. With the help of thesacredpath I did some work on them a couple of weeks back (increasing the image to show a full book cover rather than a crop) and they looked perfect then. Any idea how I can fix? Thank you for any wisdom!
kathrynwp · Staff · Oct 25, 2016 at 2:50 pm
Copy link
Please start a new thread for your additional question. Thanks!

No items found.