How to remove page title and insert hero flush with menu bar?
-
Hi there,
I’m trying to create a clean page with a hero bar right under a thin top menu bar.
Like this: https://siteorigin.com/theme/clearly/?action=demo#focus
Or this: https://layouts.siteorigin.com/layout/beautifully-baked/The problem I’m experiencing is that there always a bit of clutter that gets in the way: the page title and the top bit of the content box. The best way to illustrate it is probably for me to copy the ‘beautifully baked’ widgets onto my page and take a shot:
https://viewanda.com/wp-content/uploads/2016/09/Screen-Shot-2016-09-20-at-15.34.50.pngDo you see at the top in the centre where it says ‘Home Page’ in big letters? And under it the white square that sticks up into the black stripe? I’d like to sort that out.
How do I remove the title?
How do I either remove the white box or post or insert a hero widget above it so it doesn’t overlap the black stripe.Your help is much appreciated.
-
Wow. That wasn’t easy but I’ve cracked it.
The place to start is in your browser. You need to right click and go ‘inspect’
You will see lots of complex looking code. Fiddle around until you work out how to relate the code to the stuff that you want to change … like the title and the central box for me.
When you’ve identified the bits the next thing is to see that you can turn properties (if that’s what they are called) on and off for each bit … there are some tick boxes that let you do that inside the inspector. When you change them in the inspector you can see the effect they will have on the page.
Once you have worked out what you need to change you need to make those changes in the code of the theme in wordpress: the cascading style sheet or CSS.
Find that in WP by going Appearance: Editor
Scroll to the bottom and make your changes there. This is the code that I created to alter the CSS:
.post-heading {
display: none;
}#single-header .container {
margin-top: 0px;
padding-bottom: 0px;
}.content-container {
background: none;
border: none;
}After you add your code save the CSS and refresh the browser you were using to look at your web page. Did it change as you had hoped?
- The topic ‘How to remove page title and insert hero flush with menu bar?’ is closed to new replies.
