Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 3, 2013 at 7:59 pm #28897
    Jay

    Hi Guys,

    I wonder if anyone could help.

    I would like my main menu to span the full width of the webpage (960px) within all different sized browsers.

    The problem i have is that the padding between the links seem to change depending on what size monitor i view it in. Ideally i would like “Contact Us” to be level with the end of the London number within any size monitor.

    If anyone could help it would be greatly appreciated. Please find the link to my development server below.

    http://uprisetestdomain.co.uk/paramount/

    Thanks in advance,

    Jyles

    September 4, 2013 at 8:06 am #139059
    Jay

    Hi guys,

    Any help with this would so appreciated.

    Kind Regards,

    Jyles

    September 5, 2013 at 1:56 am #139060
    Devin

    Hi Jyles,

    Our forums go by oldest post within a topic to newest so each time you self respond it actually pushes your topic to the end of our queue and not the start of it.

    For your issue, what you would need to do is a bit complicated if you aren’t used to media queries. You can use media queries to change the margin-right on your numberbox class so that as the theme responds to the browsers width the margin changes.

    See: http://css-tricks.com/css-media-queries/

    To get you started this would be for the very largest screen size adjustment (all screens above 1650px wide):

    @media screen and (min-width: 1650px){
    
.numbersbox { margin-right: 67px; }
    
}

    Regards,

    Devin

    September 5, 2013 at 10:51 am #139061
    Jay

    HI Devin,

    Thanks for your reply, i am familiar with media queries but i really am not sure what is going on with the navigation, all i need it the main menu to run the full width of the page within all sized browsers. Could you take a look at the code and see where i am going wrong?

    September 5, 2013 at 12:10 pm #139062
    Devin

    You’ve added some media queries at the end of the theme’s layout.css. This block specifically is changing the menu at min-width: 1650px:

    .main_menu ul:first-child > li > a{
    
display:block;
    
text-decoration: none;
    
padding: 0 0px 0px 41px;
    
font-weight: normal;
    
font-size:12px;
    
font-weight: 600;
    
font-size: 13px;
    
background-image: url('http://uprisetestdomain.co.uk/paramount/wp-content/uploads/2013/06/bullet.png');
    
background-repeat: no-repeat;
    
background-position: 18px 12px;
    
}

    Its very bad practice to modify the theme’s css files directly. Instead you should only edit the custom.css file or add your css into the Quick CSS field in the theme’s Styling tab.

    September 9, 2013 at 5:43 pm #139063
    Jay

    Hi Devin,

    Sorry for the late reply, i really appreciate your time for such a stupid request. I have reinserted the original menu CSS so all i need to know now is how to have my menu items span the full width of the page so “Contact Us” is beneath the phone numbers on the far right?

    Thanks in advance (again)

    September 11, 2013 at 4:06 pm #139064
    Devin

    Looks like its already set to the far right on my end.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Same Main Menu Position Within All Screen Sizes’ is closed to new replies.