Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

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


  #1  
Old Jul 3, 2019, 07: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?

Last edited by Steve700; Jul 19, 2019 at 02:43 PM.
  #2  
Old Jul 4, 2019, 12:54 PM
juggledad's Avatar
juggledad
 
23,765 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, 08: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, 1474 views)
  #4  
Old Jul 5, 2019, 09: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, 1533 views)

Last edited by Steve700; Jul 6, 2019 at 07:41 AM.
  #5  
Old Jul 6, 2019, 10:46 AM
juggledad's Avatar
juggledad
 
23,765 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:	1524
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, 04: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 08:12 PM.
  #7  
Old Jul 9, 2019, 05:14 AM
juggledad's Avatar
juggledad
 
23,765 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



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


All times are GMT -6. The time now is 12:05 PM.


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