Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Change padding around site title, tag line, navigation


Go to solution Solved by tuanphan,

Recommended Posts

Hi -- on my home page www.jaapw.com I'm trying to: 1. align the text of title, tagline and navigation with the image block below it (left + right side); 2. increase padding above the site title; and 3. reduce padding between site title and tag line.

If anyone has CSS code for these, would love to use it, thanks a lot.

Edited by JWny2019
Link to comment

@JWny2019 Question 1. Align left or right or..?

Question 2.


a.Header-branding {
   padding-top: 20px !important;
}

Question 3.


.Header-inner--top {
   padding-bottom: 15px;
}


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks a lot @tuanphan. Got the title and tag line padding to work with your code.

As for alignment on HOME https://www.jaapw.com/: - looking to align title and tag line left with left end of image block - navigation to align right with right end of image of image block - padding between images in image block should stay same

Same as on https://www.jaapw.com/work but somehow cant get it to work on HOME.

Thanks again for your awesome help.

Link to comment
  • Solution

@JWny2019


.Header-inner {
   padding-left: 10px;
   padding-right: 10px;
}

Do you want to disable click when hovering over an image? Or change the mouse pointer icon when hovering over the image?

Click Accept Answer if it worked. Other members can use it!

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

"Do you want to disable click when hovering over an image? Or change the mouse pointer icon when hovering over the image?" -- thanks, I'm actually not looking to change this.

On the home page all I'm trying to do is increase padding on the left and right outside of the image block, in order to have the block shrink a bit and align with the title/tagline on the left and navigation on the right. I'd like to the margins between the images inside the image block stay the same (3px).

Link to comment

Hi @tuanphan -- is there a way to make the www.jaapw.com home page padding you shared show only on desktop, not mobile? The alignment on mobile is a bit off now. Also -- and I know I've been asking you for A LOT -- if you have a way to make the navigation hamburger on mobile align top right (at the same level as the mobile page tile, that would be awesome. Thank you very much for your help. You're amazing!

Link to comment

@JWny2019

Question 1. Wrap my code in this code


@media screen and (min-width:641px) {
PASTE THE CODE I SENT
}

Question 2


@media screen and (max-width:640px) {
button.Mobile-bar-menu {
   margin-top: -20px;
}
}


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

Hi, I am trying to have the my header space lateral margin be different than the general site margins. or my Index page side margins independent.

I am trying to make the lateral padding larger for my index page, but at the same time I don't want my header links to go on two lines, I want them to always stay in one line. 

I have been looking for code injections. so far all I found don't work.

can anyone help? 

https://pear-papaya-hg5t.squarespace.com/selected-work

pass: leonardo

Link to comment
On 4/9/2021 at 4:26 PM, vcampaner said:

Hi, I am trying to have the my header space lateral margin be different than the general site margins. or my Index page side margins independent.

I am trying to make the lateral padding larger for my index page, but at the same time I don't want my header links to go on two lines, I want them to always stay in one line. 

I have been looking for code injections. so far all I found don't work.

can anyone help? 

https://pear-papaya-hg5t.squarespace.com/selected-work

pass: leonardo

Add to Design > Custom CSS

div#gridThumbs {
    padding-left: 5vw;
    padding-right: 5vw;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...