Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Limit page max-width and center the top menu and header image


  #1  
Old Jul 3, 2019, 06:37 PM
Steve700
 
17 posts · Dec 2016
Ohio
I tested my site on a large screen and it didn't look right. So I used the Style and configure Layout option and set the max width to 1920. This worked fine except the header image is justified left even though I pick centered in header image alignment window and the menu bar extends across the whole screen.
I've tried various combination of settings but no luck.

If I inspect the page and manually set the first element to:
max-width: 1920px;
margin-left: auto;
margin-right: auto;

everything works fine except the header logo image is left instead of centered. What can I add stilll center the image?
  #2  
Old Jul 4, 2019, 11:54 AM
juggledad's Avatar
juggledad
 
23,727 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What is the site?
Please export your ayahuasca settings and attach them to a response.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jul 5, 2019, 07:22 AM
Steve700
 
17 posts · Dec 2016
Ohio
https://familyhistories.us

Using Firefox Inspector I set the element. Should not have used the term first element.
Attached Files
File Type: txt ata-familyhistoriesus-20190705.txt (18.4 KB, 21 views)
  #4  
Old Jul 5, 2019, 08:38 PM
Steve700
 
17 posts · Dec 2016
Ohio
I messed around for a while and came up with some settings that helped. There is probably a better way to do this but it seems to get the job done. (see attachment-updated)

Let me know what you think and thanks for taking a look.
Attached Files
File Type: txt ata-familyhistoriesus-20190706_max-width_1920.txt (18.4 KB, 22 views)

Last edited by Steve700; Jul 6, 2019 at 06:41 AM.
  #5  
Old Jul 6, 2019, 09:46 AM
juggledad's Avatar
juggledad
 
23,727 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You might want to read the last part of this option:
Attached Thumbnails
Click image for larger version

Name:	Screen Shot 2019-07-06 at 11.45.05 AM.png
Views:	25
Size:	54.6 KB
ID:	2833  
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jul 7, 2019, 03:00 PM
Steve700
 
17 posts · Dec 2016
Ohio
Thank you I did read that. The problem is with large displays, content created for smaller ones does not look right.

Even if you use rotating images, you can go to Style and configure layout and set Layout MAX width to what you want, such as 1920. Then go to Add HTML/CSS inserts and enter the code below (change 1920 to the display size you want).

Code:
div.header-image-container-pre {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
The image will be moved to the right so the left side is aligned with your layout. Even if you don't use the MAX layout option, set max-width to the width of your image and it will move to the center, provided the image width matches the number you use.

If you are using a full width fixed menu you can add to code below to set the width to match.
Code:
div#menu1 ul.rMenu {
    max-width: 1920px;
}

Last edited by Steve700; Jul 7, 2019 at 07:12 PM.
  #7  
Old Jul 9, 2019, 04:14 AM
juggledad's Avatar
juggledad
 
23,727 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Very nice solution!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Menu width when %page-center Harald Page & Category Menu Bars 2 Apr 21, 2014 10:24 AM
[SOLVED] Full Width Header and Footer with Logo/Menu/Content positioned above center SigWS Header configuration & styling 20 Mar 14, 2014 03:30 PM
how do I center justify the page menu across a set width? dutchess Page & Category Menu Bars 3 Apr 7, 2011 10:33 PM
How to make header image & menu bars stretch full width of the container? Shan_LSOS Header configuration & styling 19 Oct 25, 2010 11:51 PM
[SOLVED] page-center and cat-center to fill the width of the site cway Page & Category Menu Bars 2 Oct 25, 2010 10:30 AM


All times are GMT -6. The time now is 12:57 AM.


Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.